{ 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