Input Elements
Text Input with Label
<div class="flex justify-center m-10">
<div class="w-80">
<label for="first_name" class="block text-sm font-medium text-gray-700">
First Name
</label>
<input type="text" name="first_name" id="first_name"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="John">
</div>
</div>
Input with Prefix Label
<div class="flex justify-center m-10">
<div class="w-80">
<label for="twitter_handle" class="block text-sm font-medium text-gray-700">
Twitter Handle
</label>
<div class="mt-1 flex rounded-md">
<span
class="inline-flex items-center px-4 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-xs">
http://twitter.com/
</span>
<input type="text" name="twitter_handle" id="twitter_handle"
class="w-full rounded-r-md px-4 py-2 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
placeholder="johndoe">
</div>
</div>
</div>
Textarea with Label
<div class="flex justify-center m-10">
<div class="w-96">
<label for="bio" class="block text-sm font-medium text-gray-700">
Bio
</label>
<textarea name="bio" id="bio"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
rows="3" placeholder="Enter brief about you"></textarea>
</div>
</div>
Dropdown with Label
<div class="flex justify-center m-10">
<div class="w-80">
<label for="country" class="block text-sm font-medium text-gray-700">
Country
</label>
<select name="country" id="country"
class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500">
<option value="" selected disabled>Choose a Country</option>
<option value="India">India</option>
<option value="United States">United States</option>
<option value="Australia">Australia</option>
<option value="Vietnam">Vietnam</option>
</select>
</div>
</div>
Radio Inputs
<div class="flex justify-center m-10">
<div class="w-20">
<label for="gender" class="block text-sm font-medium text-gray-700 mb-1">
Gender
</label>
<div class="flex items-center mt-1">
<input id="gender_male" name="gender" type="radio"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="gender_male" class="ml-2 block text-sm font-medium text-gray-700">
Male
</label>
</div>
<div class="flex items-center mt-1">
<input id="gender_female" name="gender" type="radio"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="gender_female" class="ml-2 block text-sm font-medium text-gray-700">
Female
</label>
</div>
<div class="flex items-center mt-1">
<input id="gender_other" name="gender" type="radio"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="gender_other" class="ml-2 block text-sm font-medium text-gray-700">
Other
</label>
</div>
</div>
</div>
Checkbox Inputs
<div class="flex justify-center m-10">
<div class="w-20">
<label for="gender" class="block text-sm font-medium text-gray-700 mb-1">
Emails
</label>
<div class="flex items-center mt-1">
<input id="emails_news" name="emails" type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="emails_news" class="ml-2 block text-sm font-medium text-gray-700">
News
</label>
</div>
<div class="flex items-center mt-1">
<input id="emails_offers" name="emails" type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
<label for="emails_offers" class="ml-2 block text-sm font-medium text-gray-700">
Offers
</label>
</div>
</div>
</div>