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.

Create your account

Join our community today

Minimum 8 characters with numbers and symbols

Or sign up with

Already have an account?Sign in

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

Minimum 8 characters with numbers and symbols

Already have an account?Sign in

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.

Create Your Account

Join our community today

Or with email
Weak

Already have an account?Sign in

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>