In this tutorial, we will create a simple validation form UI, along with success and error messages. We will also cover validation with SVG icons and provide login form validation examples using Tailwind CSS.
Tool Use
Tailwind CSS
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 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>
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>
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>
Example 4
Tailwind CSS Login Form with validation.
<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>
</div>
