<div class="container mx-auto p-4 bg-white"> <div class="w-full md:w-1/2 lg:w-1/3 mx-auto my-12"> <h1 class="text-lg font-bold">Register</h1> <form class="flex flex-col mt-4"> <input type="text" name="full-name" class="px-4 py-3 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-sm" placeholder="Full Name" /> <input type="email" name="email" class="px-4 py-3 mt-4 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-sm" placeholder="Email address" /> <input type="password" name="password" class="px-4 py-3 mt-4 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-sm" placeholder="Password" /> <input type="password" name="repeat-password" class="px-4 py-3 mt-4 w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 text-sm" placeholder="Repeat Password" /> <button type="submit" class="mt-4 px-4 py-3 leading-6 text-base rounded-md border border-transparent text-white focus:outline-none bg-blue-500 text-blue-100 hover:text-white focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer inline-flex items-center w-full justify-center items-center font-medium focus:outline-none" > Register </button> <div class="flex flex-col items-center mt-5"> <p class="mt-1 text-xs font-light text-gray-500"> Register already?<a class="ml-1 font-medium text-blue-400">Sign in now</a> </p> </div> </form> </div> </div>
Tailwind CSS basic register form with email, password and button component
How to install and add to your project?
Step 1: Include Scripts and Styling CDN inside the head tag
<script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css"> <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Step 2: Copy the Tailwind CSS Basic Register Form component code above as you need it
Step 3: Preview the component in your browser 🚀
Step 4: For production release make sure to use the official Tailwind CSS Installation
You are done 🎉
Credits or Attribution
If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.
<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>