In this tutorial we will see tailwind css forms, tailwind css form components, tailwind custom forms, input form, input form with icon, inline form, underline input form, input form group, select group, radio group and checkbox, example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Tailwind CSS simple custom input form.
<input
type="text"
name="name"
class="w-1/3 px-4 py-2 border border-gray-300 outline-none focus:border-gray-400"
/>
Note : You can use also w-full class.
Example 2
input form with label v1
<label for="Name">Name</label>
<input
type="text"
name="name"
class="w-1/3 px-4 py-2 border border-gray-300 outline-none focus:border-gray-400"
/>
input form with horizontal label v2
<div class="flex items-center gap-x-4">
<label for="Name">Name</label>
<input
type="text"
name="name"
class="w-1/3 px-4 py-2 border border-gray-300 outline-none focus:border-gray-400"
/>
</div>
Example 3
Input form with vertical label v1.
<label class="block" for="Name">Name</label>
<input
type="text"
name="name"
class="w-1/3 px-4 py-2 border border-gray-300 outline-none focus:border-gray-400"
/>
Input form with vertical label v2.
<div class="flex flex-col gap-y-2">
<label for="Name">Name</label>
<input
type="text"
name="name"
class="w-1/3 px-4 py-2 border border-gray-300 outline-none focus:border-gray-400"
/>
</div>
Example 4
Underline Form
<input
type="text"
name="name"
placeholder="Enter Your Name"
class="w-1/3 px-4 py-2 border-b-2 border-gray-400 outline-none focus:border-gray-400"
/>
Example 5
Tailwind CSS Input Groups form
<div class="flex rounded-md shadow-sm">
<span class="
inline-flex
items-center
px-3
text-sm text-gray-500
border border-r-0 border-gray-300
rounded-l-md
bg-gray-50">
@
</span>
<input
type="text"
name="username"
class="w-1/3
px-4
py-2
border border-gray-300
outline-none
focus:border-gray-400"
placeholder="Username"
/>
</div>
Example 6
Tailwind CSS input form with icon.
<label class="relative flex flex-col justify-center w-1/3">
<span class="mb-2">Name</span>
<input
class="py-2 pl-12 pr-2 border-2 border-gray-200 rounded-md outline-none focus:border-gray-400"
type="text"
name="username"
placeholder="Username"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
class="
absolute
bottom-0
left-0
-mb-0.5
transform
translate-x-1/2
-translate-y-1/2
text-gray-500
h-6
w-6
"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</label>
Example 7
Tailwind CSS Textarea style.
<div class="w-1/3">
<label class="text-gray-600">Message</label>
<textarea
name="message"
class="
w-full
h-32
px-4
py-3
border-2 border-gray-300
rounded-sm
outline-none
focus:border-blue-400
"
placeholder="Please tell us about yourself in a few sentences"
></textarea>
</div>
Select group
<div class="w-1/3">
<label class="inline-block text-sm text-gray-600" for="color">Select Your Gender</label>
<div class="relative flex w-full">
<select class="block w-full py-3 pl-4 pr-8 bg-white border border-gray-300 rounded-sm appearance-none cursor-pointer focus:outline-none hover:border-gray-400">
<option>Select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-2 text-blue-400 pointer-events-none">
<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
Checkbox
<div class="flex items-center w-1/3">
<input
type="checkbox"
name="remember"
class="w-5 h-5 border border-gray-300 rounded-sm outline-none cursor-pointer"
/>
<label class="ml-2 text-sm" for="email">Remember me</label>
</div>
Radio Group
<div>
<label class="inline-block mb-4 text-sm text-gray-600" for="color"
>Select Gender</label
>
<div>
<div class="flex items-center mb-3 last:mb-0">
<input
name="gender"
type="radio"
class="w-6 h-6 border border-gray-300 rounded-full outline-none cursor-pointer"
value="male"
checked=""
/><label class="ml-2 text-sm" for="male">Male</label>
</div>
<div class="flex items-center mb-3 last:mb-0">
<input
name="gender"
type="radio"
class="w-6 h-6 border border-gray-300 rounded-full outline-none cursor-pointer"
value="female"
/><label class="ml-2 text-sm" for="female">Female</label>
</div>
<div class="flex items-center mb-3 last:mb-0">
<input
name="gender"
type="radio"
class="w-6 h-6 border border-gray-300 rounded-full outline-none cursor-pointer"
value="other"
/><label class="ml-2 text-sm" for="other">Other</label>
</div>
</div>
</div>
Contact Us Form
<div class="container mx-auto">
<div class="max-w-xl p-5 mx-auto my-10 bg-white rounded-md shadow-sm">
<div class="text-center">
<h1 class="my-3 text-3xl font-semibold text-gray-700">Contact Us</h1>
<p class="text-gray-400">Fill up the form below to send us a message.</p>
</div>
<div>
<form action="" method="POST">
<div class="mb-6">
<label for="name" class="block mb-2 text-sm text-gray-600"
>Full Name</label
>
<input
type="text"
name="name"
placeholder="John Doe"
required
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
/>
</div>
<div class="mb-6">
<label for="email" class="block mb-2 text-sm text-gray-600"
>Email Address</label
>
<input
type="email"
name="email"
placeholder="[email protected]"
required
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
/>
</div>
<div class="mb-6">
<label for="phone" class="text-sm text-gray-600">Phone Number</label>
<input
type="text"
name="phone"
placeholder="91 1234-567"
required
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
/>
</div>
<div class="mb-6">
<label for="message" class="block mb-2 text-sm text-gray-600"
>Your Message</label
>
<textarea
rows="5"
name="message"
placeholder="Your Message"
class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300"
required
></textarea>
</div>
<div class="mb-6">
<button
type="submit"
class="w-full px-2 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
>
Send Message
</button>
</div>
</form>
</div>
</div>
</div>
See Also
Tailwind CSS Free Digital Agency Landing Page
TailFood – Free Tailwind CSS Restaurant Template
Tailwind CSS Real Estate Template
Tailwind CSS Simple Responsive Landing Page Template
Tailwind CSS Simple Verification Email Template
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example