Home
Anja Müller
Simple Sign-up Box

Simple Sign-up Box

It features a backdrop blur effect on a dark background, creating an elegant and modern look.

This tailwind example is contributed by Anja Müller, on 04-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Anja Müller

10.7k

Fork Fullscreen

<div class="w-96 backdrop-blur-lg bg-opacity-80 rounded-lg shadow-lg p-5 bg-gray-900 text-white">
  <h2 class="text-2xl font-bold pb-5">SignUp</h2>
  <form>
    <div class="mb-4">
      <label for="name" class="block mb-2 text-sm font-medium">Your name</label>
      <input
        type="text"
        id="name"
        class="bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full py-2.5 px-4"
        placeholder="Andrew Jackson"
        required
        value=""
      >
    </div>
    <div class="mb-4">
      <label for="email" class="block mb-2 text-sm font-medium">Your email</label>
      <input
        type="email"
        id="email"
        class="bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full py-2.5 px-4"
        placeholder="andrew@mail.com"
        required
        value=""
      >
    </div>
    <div class="mb-4">
      <label for="password" class="block mb-2 text-sm font-medium">Your password</label>
      <input
        type="password"
        id="password"
        class="bg-gray-100 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full py-2.5 px-4"
        placeholder="*********"
        required
        value=""
      >
    </div>
    <div>
      <p class="text-red-500 pb-5"></p>
    </div>
    <div class="flex items-center justify-between mb-4">
      <button
        type="submit"
        class="text-white bg-purple-600 hover:bg-purple-700 focus:ring-2 focus:ring-blue-300 font-medium rounded-lg text-sm py-2.5 px-5 w-full sm:w-auto"
      >
        Register
      </button>
      <div class="flex items-center text-sm">
        <p>Already have an account?</p>
        <p class="underline cursor-pointer ml-1">Sign in</p>
      </div>
    </div>
  </form>
</div>

Related Examples

Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.3k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

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

Author:
Bunny

3 years ago

50k
User registration form

Author:
Leon Bachmann

3 years ago

25k
Sign in form

Author:
Simon Scheffer

2 years ago

16.4k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

3 years ago

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

Author:
Akshay

3 years ago

23.9k
Contact us form template with fabform

Author:
Ho O

1 year ago

1.1k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4.2k
Login Form

Author:
Maxim

10 months ago

1.2k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

2 years ago

7k
form3

Author:
ABDO-SY

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components