Unstyled
{/* Unstyled */}
{/*--------------------*/}
<div className='grid grid-cols-1 gap-6'>
<label className='block'>
<span className='text-gray-700'>Full name</span>
<input type='text' className='block w-full mt-1' />
</label>
<label className='block'>
<span className='text-gray-700'>Email Address</span>
<input type='email' className='block w-full mt-1' placeholder='jane@example.com' />
</label>
<label className='block'>
<span className='text-gray-700'>Birthday</span>
<input type='date' className='block w-full mt-1' />
</label>
<label className='block'>
<span className='text-gray-700'>Favorite fruit?</span>
<select className='block w-full mt-1'>
<option>Watermelon</option>
<option>Papaya</option>
<option>Grapes</option>
</select>
</label>
<label className='block'>
<span className='text-gray-700'>Message</span>
<textarea className='block w-full mt-1' rows='3' />
</label>
<div className='block'>
<label className='inline-flex items-center'>
<input type='checkbox' />
<span className='ml-2'>Subscribe to our newsletter</span>
</label>
</div>
</div>
Simple
{/* Simple */}
{/*--------------------*/}
<div className='grid grid-cols-1 gap-6'>
<label className='block'>
<span className='text-gray-700'>Full name</span>
<input type='text' className='block w-full mt-1 border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50' />
</label>
<label className='block'>
<span className='text-gray-700'>Email Address</span>
<input type='email' className='block w-full mt-1 border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50' placeholder='jane@example.com' />
</label>
<label className='block'>
<span className='text-gray-700'>Birthday</span>
<input type='date' className='block w-full mt-1 border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50' />
</label>
<label className='block'>
<span className='text-gray-700'>Favorite fruit?</span>
<select className='block w-full mt-1 border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50'>
<option>Watermelon</option>
<option>Papaya</option>
<option>Grapes</option>
</select>
</label>
<label className='block'>
<span className='text-gray-700'>Message</span>
<textarea className='block w-full mt-1 border-gray-300 rounded-md focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50' rows='3' />
</label>
<div className='block'>
<label className='inline-flex items-center'>
<input type='checkbox' className='text-blue-600 border-gray-300 rounded focus:border-blue-300 focus:ring focus:ring-blue-300 focus:ring-opacity-50' />
<span className='ml-2'>Subscribe to our newsletter</span>
</label>
</div>
</div>
Underline
{/* Underline */}
{/*--------------------*/}
<div className='grid grid-cols-1 gap-6'>
<label className='block'>
<span className='text-gray-700'>Full name</span>
<input type='text' className='block w-full px-1 mt-0 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-gray-900' />
</label>
<label className='block'>
<span className='text-gray-700'>Email Address</span>
<input type='email' className='block w-full px-1 mt-0 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-gray-900' placeholder='jane@example.com' />
</label>
<label className='block'>
<span className='text-gray-700'>Birthday</span>
<input type='date' className='block w-full px-1 mt-0 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-gray-900' />
</label>
<label className='block'>
<span className='text-gray-700'>Favorite fruit?</span>
<select className='block w-full px-1 mt-0 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-gray-900'>
<option>Watermelon</option>
<option>Papaya</option>
<option>Grapes</option>
</select>
</label>
<label className='block'>
<span className='text-gray-700'>Message</span>
<textarea className='block w-full px-1 mt-0 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-gray-900' rows='3' />
</label>
<div className='block'>
<label className='inline-flex items-center'>
<input type='checkbox' className='text-gray-900 border-2 border-gray-300 focus:border-gray-300 focus:ring-gray-900'/>
<span className='ml-2'>Subscribe to our newsletter</span>
</label>
</div>
</div>
Solid
{/* Solid */}
{/*--------------------*/}
<div className='grid grid-cols-1 gap-6'>
<label className='block'>
<span className='text-gray-700'>Full name</span>
<input type='text' className='block w-full mt-1 bg-gray-100 border-transparent rounded-md focus:border-gray-500 focus:bg-white focus:ring-0' />
</label>
<label className='block'>
<span className='text-gray-700'>Email Address</span>
<input type='email' className='block w-full mt-1 bg-gray-100 border-transparent rounded-md focus:border-gray-500 focus:bg-white focus:ring-0' placeholder='jane@example.com' />
</label>
<label className='block'>
<span className='text-gray-700'>Birthday</span>
<input type='date' className='block w-full mt-1 bg-gray-100 border-transparent rounded-md focus:border-gray-500 focus:bg-white focus:ring-0' />
</label>
<label className='block'>
<span className='text-gray-700'>Favorite fruit?</span>
<select className='block w-full mt-1 bg-gray-100 border-transparent rounded-md focus:border-gray-500 focus:bg-white focus:ring-0'>
<option>Watermelon</option>
<option>Papaya</option>
<option>Grapes</option>
</select>
</label>
<label className='block'>
<span className='text-gray-700'>Message</span>
<textarea className='block w-full mt-1 bg-gray-100 border-transparent rounded-md focus:border-gray-500 focus:bg-white focus:ring-0' rows='3' />
</label>
<div className='block'>
<label className='inline-flex items-center'>
<input type='checkbox' className='text-gray-700 bg-gray-100 border-transparent rounded focus:border-transparent focus:bg-gray-200 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500' />
<span className='ml-2'>Subscribe to our newsletter</span>
</label>
</div>
</div>