tailwind css forms examples

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>
input form with horizontal label v2

input form with horizontal label v2


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>
Input form with vertical label

Input form with vertical label


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"
/>
tailwind Underline Form

tailwind Underline Form


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>
Tailwind CSS input form with icon

Tailwind CSS input form with icon


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>
Tailwind CSS Textarea style

Tailwind CSS Textarea style


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>
tailwind Select group

tailwind Select group

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>
tailwind remember me Checkbox

tailwind remember me Checkbox

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>
tailwind Radio Group

tailwind Radio Group


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>
tailwind contact us

tailwind contact us


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 Badges 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 Search Examples

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