Home
Anja Müller
Simple Sign-In Box

Simple Sign-In 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 24-Sep-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

7.3k

Fork Fullscreen

<div class="flex justify-center">
  <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">Sign In</h2>
    <form>
      <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 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"
        >
          Submit
        </button>
        <div class="flex items-center text-sm">
          <p>New here?</p>
          <p class="underline cursor-pointer ml-1">Register</p>
        </div>
      </div>
    </form>
  </div>
</div>

Related Examples

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

2 years ago

48.1k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

10.7k
Simple login form

Author:
R Thapa

1 year ago

20k
Login Form with Icon

Author:
Prashant

2 years ago

15.8k
Sign in / Login Form

Author:
Bunny

2 years ago

12.4k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.5k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

2 months ago

781
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

5 months ago

1.2k
Login form

Author:
Aman kumar

1 year ago

3.3k
Contact me form

Author:
Arya

2 years ago

11.4k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

9 months ago

1.7k
Login form
responsive login page design

Author:
Aman kumar

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components