In this section we will see tailwind css input form, tailwind input with icon, tailwind input form validation, tailwind input with lable & input focus, tailwind material input example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Small size input form.
<div class="w-1/3">
<input
type="text"
name="name"
class="w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none"
placeholder="Enter Your Name"
/>
</div>
medium size input form.
<div class="w-1/3">
<input
type="text"
name="name"
class="w-full px-4 py-2 text-base border border-gray-300 rounded outline-none"
placeholder="Enter Your Name"
/>
</div>
large size input form
<div class="w-1/3">
<input
type="text"
name="name"
class="w-full px-6 py-3 text-lg border border-gray-300 outline-none"
placeholder="Enter Your Name"
/>
</div>
Tailwind CSS Input Form v1
Example 2
Input form with left side icon
<div class="w-1/3">
<div class="inline-flex w-full border">
<div class="w-1/12 pt-2 bg-gray-100">
<svg
fill="none"
class="w-6 mx-auto text-gray-400"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</div>
<input
type="email"
class="w-full px-4 py-2 rounded focus:outline-none focus:text-gray-600"
placeholder="[email protected]"
/>
</div>
</div>
Input form with right side icon
<div class="w-1/3">
<div class="inline-flex w-full border">
<input
type="email"
class="w-full px-4 py-2 rounded focus:outline-none focus:text-gray-600"
placeholder="[email protected]"
/>
<div class="w-1/12 pt-2 bg-gray-100">
<svg
fill="none"
class="w-6 mx-auto text-gray-400"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</div>
</div>
</div>
Tailwind CSS Input Form v2
Example 3
Input form with lable and focus ring.
<div class="w-1/3">
<label for="Name" class="block mb-1 text-sm text-gray-600">Your Name</label>
<input
type="text"
name="name"
class="
w-full
px-4
py-2
text-base
border border-gray-300
rounded
outline-none
focus:ring-blue-500 focus:border-blue-500 focus:ring-1
"
placeholder="Enter Your Name"
/>
</div>
<div class="w-1/3">
<label for="password" class="block mb-1 text-sm text-gray-600"
>Password</label
>
<input
type="password"
name="name"
class="
w-full
px-4
py-2
text-base
border border-gray-300
rounded
outline-none
focus:ring-blue-500 focus:border-blue-500 focus:ring-1
"
placeholder="Password"
/>
</div>
Tailwind CSS Input Form v3
Example 4
Tailwind CSS material input.
<div class="w-1/3">
<input
type="text"
name="name"
placeholder="Your Name"
class="
w-full
px-4
py-2
text-base
border-b-2 border-gray-400
focus:outline-none focus:border-blue-400
"
/>
</div>
<div class="w-1/3">
<input
type="password"
name="password"
placeholder="Password"
class="
w-full
px-4
py-2
text-base
border-b-2 border-gray-400
focus:outline-none focus:border-green-400
"
/>
</div>
Tailwind CSS Input Form v4
Example 5
Tailwind CSS input form validation
<div class="w-1/3">
<label for="Name" class="block mb-1 text-sm text-gray-600">Your Name</label>
<input
type="text"
name="name"
class="
w-full
px-4
py-2
text-base
border border-gray-300
rounded
outline-none
focus:ring-blue-500 focus:border-blue-500 focus:ring-1
"
placeholder="Enter Your Name"
/>
<span class="inline-flex text-sm text-green-700"
>Username available!
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/></svg
></span>
</div>
<div class="w-1/3">
<label for="password" class="block mb-1 text-sm text-gray-600"
>Password</label
>
<input
type="password"
name="password"
class="
w-full
px-4
py-2
text-base
border border-gray-300
rounded
outline-none
focus:ring-blue-500 focus:border-blue-500 focus:ring-1
"
placeholder="Password"
/>
<span class="inline-flex text-sm text-red-700"
>Password must be 8 characters
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/></svg
></span>
</div>
Tailwind CSS Input Form v5
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
