{
true && <div className="border-r-2 border-b-2 border-l-2 border-light-blue-500 rounded-b-md pl-4 pr-4 pb-4">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
<label htmlFor="ownerName" className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
Owner Name
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" name="ownerName" id="ownerName"
className="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
}
// toggle can also be used in class names as follows:
className= {`bg-blue-400 text-white px-2 py-3 w-full text-left ${ toggleForm ? 'rounded-t-md': 'rounded-md'}`} >
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter