Home
Shariar Hasan
Register Form

Register Form

This is a simple Register Form component with dark mode supported and mobile responsive

This tailwind example is contributed by Shariar Hasan, on 29-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Shariar Hasan

1.8k

Fork Fullscreen

<div class="max-w-lg mx-auto  bg-white dark:bg-gray-800 rounded-lg shadow-md px-8 py-10 flex flex-col items-center">
    <h1 class="text-xl font-bold text-center text-gray-700 dark:text-gray-200 mb-8">Welcome to My Company</h1>
    <form action="#" class="w-full flex flex-col gap-4">
      <div class="flex items-start flex-col justify-start">
        <label for="firstName" class="text-sm text-gray-700 dark:text-gray-200 mr-2">First Name:</label>
        <input type="text" id="firstName" name="firstName" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="username" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Username:</label>
        <input type="text" id="username" name="username" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="email" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Email:</label>
        <input type="email" id="email" name="email" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="password" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Password:</label>
        <input type="password" id="password" name="password" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<div class="flex items-start flex-col justify-start">
        <label for="confirmPassword" class="text-sm text-gray-700 dark:text-gray-200 mr-2">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-3 dark:text-gray-200 dark:bg-gray-900 py-2 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500">
      </div>

<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md shadow-sm">Register</button>
    </form>

<div class="mt-4 text-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">Already have an account? </span>
      <a href="#" class="text-blue-500 hover:text-blue-600">Login</a>
    </div>
    </form>
  </div>

Related Examples

Responsive registration form
form with social login buttons

Author:
Sophia Baker

1 year ago

31.3k
Sample login form

Author:
Orestis Tsakiridis

1 month ago

228
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

7 months ago

1.7k
Login with social media buttons

Author:
TailwindFlex

2 years ago

12.1k
User registration form

Author:
Laurits

2 years ago

10.1k
Sign in form
includes Google login button

Author:
Paul Intay

9 months ago

1.7k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

7k
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Anonymous

7 months ago

1.5k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

9.2k
User registration form

Author:
Leon Bachmann

1 year ago

18.3k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

1 year ago

18.6k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

3 months ago

752

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components