Sections
Tailwind CSS Registration Forms - Madhuranjan UI
Explore our collection of registration form designs. Each template is tailored to provide a seamless user onboarding experience with unique features, from simple registration to detailed forms with terms, icons, and address fields.
Registration with Terms & Conditions
A registration form that includes terms and conditions for user compliance.
Register Your Account
Already have an account?Login
1<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-900">
2 <div class="w-full max-w-md rounded-md bg-white p-6 shadow dark:bg-gray-800">
3 <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 dark:text-white">Register Your Account</h2>
4 <form class="space-y-4">
5 <div>
6 <label class="block text-sm text-gray-700 dark:text-gray-300">Username</label>
7 <input type="text" class="mt-1 w-full rounded-md border border-gray-300 p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Username" />
8 </div>
9 <div>
10 <label class="block text-sm text-gray-700 dark:text-gray-300">Email</label>Simple Registration Form
A minimalistic registration form designed for a quick and easy sign-up.
Create an Account
Already have an account?Login
1<div class="flex min-h-screen items-center justify-center bg-gray-100 px-4 font-sans dark:bg-gray-950">
2 <div class="w-full max-w-md rounded-lg bg-white p-8 shadow-lg dark:bg-gray-800 dark:shadow-lg dark:shadow-black/30">
3 <h2 class="mb-6 text-center text-3xl font-bold text-gray-900 dark:text-white">Create an Account</h2>
4 <form class="space-y-5">
5 <div>
6 <label for="full_name" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
7 <input type="text" id="full_name" class="mt-1 w-full rounded-lg border border-gray-300 p-2.5 transition duration-150 ease-in-out focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:focus:ring-violet-400" placeholder="John Doe" />
8 </div>
9 <div>
10 <label for="email" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>Registration with Icon
A modern registration form featuring icons to enhance the user experience.
1 <div class="flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4 py-8 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full max-w-md overflow-hidden rounded-xl bg-white p-0 shadow-lg dark:bg-gray-800">
3 <div class="h-2 w-full bg-gradient-to-r from-violet-600 to-blue-500"></div>
4
5 <div class="p-6 sm:p-8">
6 <div class="mb-4 flex justify-center">
7 <div class="rounded-full bg-violet-100 p-3 dark:bg-violet-900/30">
8 <svg
9 class="h-8 w-8 text-violet-600 dark:text-violet-400"
10 fill="none"Registration with Address
A comprehensive form that collects address details along with basic information.
Create Your Account
Join our community today
1<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4 py-8 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full max-w-2xl overflow-hidden rounded-xl bg-white shadow-lg dark:bg-gray-800">
3 <div class="h-2 w-full bg-gradient-to-r from-violet-600 to-blue-500"></div>
4
5 <div class="p-6 sm:p-8">
6 <div class="mb-4 flex justify-center">
7 <div class="rounded-full bg-violet-100 p-3 dark:bg-violet-900/30">
8 <svg class="h-8 w-8 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
9 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
10 </svg>Registration with Image
A visually engaging registration form that incorporates an image for added appeal.
1 <div class="flex min-h-screen flex-col bg-white md:flex-row dark:bg-gray-900">
2 <div class="flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-6 md:w-1/2 md:p-12 dark:from-gray-900 dark:to-gray-800">
3 <div class="w-full max-w-md">
4 <div class="mb-8 flex justify-center">
5 <div class="rounded-xl bg-violet-100 p-3 dark:bg-violet-900/30">
6 <svg class="h-10 w-10 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"></path>
8 </svg>
9 </div>
10 </div>