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

3.3k

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

OTPverification

Author:
Ratikanta Pradhan

3 months ago

348
Forgot password?
you can change password an time

Author:
gidy

4 months ago

410
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

3k
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

6 months ago

464
Instagram Login Clone

Author:
Victoria Blount

4 months ago

273
Tailwind login page

Author:
Kofi Osei

2 years ago

10.9k
Login
Login

Author:
Amine Ghanim

6 months ago

1.1k
Login form

Author:
Gopi Yadav

3 years ago

10.8k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

2k
NDUSTRIALCORE login
NDUSTRIALCORE

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

383
Sign in form

Author:
Simon Scheffer

2 years ago

15.8k
Login

Author:
Amine Ghanim

6 months ago

349

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components