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.
How to install & setup Tailwind CSS v3
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 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
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.
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.
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
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
