User registration form

This tailwind example is contributed by Leon Bachmann, on 24-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Leon Bachmann

Tailwind v3.4 25.8k 24

Fork Fullscreen

<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <img class="mx-auto h-10 w-auto" src="https://www.svgrepo.com/show/301692/login.svg" alt="Workflow">
        <h2 class="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
            Create a new account
        </h2>
        <p class="mt-2 text-center text-sm leading-5 text-gray-500 max-w">
            Or
            <a href="#"
                class="font-medium text-blue-600 hover:text-blue-500 focus:outline-none focus:underline transition ease-in-out duration-150">
                login to your account
            </a>
        </p>
    </div>

<div class="mt-6">
                    <label for="username" class="block text-sm font-medium leading-5 text-gray-700">Username</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <span
                            class="inline-flex h-10 items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                            iworkedon.com/
                        </span>
                        <input id="username" name="username" placeholder="john" type="text" required=""
                            class="flex-1  border border-gray-300 form-input pl-3 block w-full rounded-none rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5">
                    </div>
                </div>

<div class="mt-6">
                    <label for="email" class="block text-sm font-medium leading-5 text-gray-700">
                        Email address
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <input id="email" name="email" placeholder="user@example.com" type="email"
                            required=""
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
                        <div class="hidden absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                </div>

<div class="mt-6">
                    <label for="password" class="block text-sm font-medium leading-5 text-gray-700">
                        Password
                    </label>
                    <div class="mt-1 rounded-md shadow-sm">
                        <input id="password" name="password" type="password" required=""
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
                    </div>
                </div>

<div class="mt-6">
                    <label for="password_confirmation" class="block text-sm font-medium leading-5 text-gray-700">
                        Confirm Password
                    </label>
                    <div class="mt-1 rounded-md shadow-sm">
                        <input id="password_confirmation" name="password_confirmation" type="password" required=""
                            class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
                    </div>
                </div>

<div class="mt-6">
                    <span class="block w-full rounded-md shadow-sm">
                        <button type="submit"
                            class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
                            Create account
                        </button>
                    </span>
                </div>
            </form>

</div>
    </div>
</div>

Related Examples

User registration form with Instructions

Fagundo67

3 years ago

25.2k
Book appointment form

Lukas Müller

3 years ago

29.5k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

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

Orion.c

3 years ago

23k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.9k
Sign up form
simple full-height register form

Lukas Müller

3 years ago

13.6k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.6k
Login form

Leon Bachmann

3 years ago

16k
Login form
login form with sign in with Google button

gmer33

3 years ago

24.5k
Login form

Leon Bachmann

3 years ago

14k
Login Form with Icon

Prashant

4 years ago

18.9k
Verify otp form

Jakub Novak

3 years ago

18.8k
Sign in form

Simon Scheffer

3 years ago

17k
Fullscreen login form with image backround

Noah Schmidt

3 years ago

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

Anja Müller

3 years ago

11.3k
Sign Up form with dark mode support

Anonymous

3 years ago

12.9k
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.

R Thapa

3 years ago

8.9k