Tailwind CSS Validation Form Example

In this tutorial we will create simple validation form ui, success validation message and error message, validation with svg icon, Login form with validation examples with Tailwind CSS.


Tool Use

Tailwind CSS 3.x

Heroicons Icons


Example 1

Tailwind CSS simple email validation form ui.

<div>
    <label for="email" class="block mb-2 text-sm text-gray-800">Email</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="Email Address" />
    <span class="text-sm text-red-600"> These credentials do not match our records. </span>
</div>
tailwind css error validation

tailwind css error validation


Tailwind CSS success email validation form ui.

<div>
    <label for="email" class="block text-sm text-gray-800">Email</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="Email Address" />
    <span class="text-sm text-green-600"> The given email address is available. </span>
</div>
tailwind css success validation

tailwind css success validation


Example 2

Tailwind CSS validation form with heroicons svg icon.

<form>
    <div class="mb-4">
        <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="mb-4">
        <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>
</form>
 Tailwind CSS validation form with icon.

Tailwind CSS validation form with icon.


Example 3

Tailwind CSS full validation form success and error message.

<form>
    <div class="mb-4">
        <label for="Name" class="block mb-1 text-sm text-green-600">Name</label>
        <input type="text" name="name"
            class="w-full px-4 py-2 text-green-900 placeholder-green-700 border border-green-500 rounded outline-none focus:ring-green-500 focus:border-green-500 focus:ring-1"
            placeholder="Name" />
        <span class="inline-flex text-sm text-green-700">Username available!
        </span>
    </div>
    <div class="mb-4">
        <label for="Name" class="block mb-1 text-sm text-red-600"> Name</label>
        <input type="text" name="name"
            class="w-full px-4 py-2 text-red-900 placeholder-red-700 border border-red-500 rounded outline-none focus:ring-red-500 focus:border-red-500 focus:ring-1"
            placeholder="Name" />
        <span class="inline-flex text-sm text-red-700">Username not available!
        </span>
    </div>
</form>  
tailwind  validation with form success and error message.

tailwind validation with form success and error message.


Example 4

Tailwind CSS Login Form with validation.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Login Form with Validation</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <div class="relative flex flex-col justify-center min-h-screen overflow-hidden">
      <div class="w-full p-6 m-auto bg-white rounded shadow-lg ring-2 ring-purple-800/50 lg:max-w-md">
        <h1 class="text-3xl font-semibold text-center text-purple-700">LOGO</h1>

        <form class="mt-6">
          <div>
            <label for="email" class="block text-sm text-gray-800">Email</label>
            <input type="email"
              class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
              placeholder="Email Address">
            <span class="inline-flex text-sm text-red-600">These credentials do not match our records.</span>
          </div>
          <div class="mt-4">
            <div>
              <label for="password" class="block text-sm text-gray-800">Password</label>
              <input type="password"
                class="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40">
              <span class="inline-flex text-sm text-red-700">Password must be 8 characters</span>
            </div>
            <a href="#" class="text-xs text-gray-600 hover:underline">Forget Password?</a>

          </div>
          <div class="mt-6">
            <button
              class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
              Login
            </button>
          </div>
        </form>
        <p class="mt-8 text-xs font-light text-center text-gray-700"> Don't have an account? <a href="#"
            class="font-medium text-purple-600 hover:underline">Sign up</a></p>

      </div>
  </body>

</html>
tailwind css validation login form

tailwind css validation login form