Home
Carlos
Sign-In Form with Tailwind CSS

Sign-In Form with Tailwind CSS

Elegant sign in form

This tailwind example is contributed by Carlos, on 21-Sep-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 Carlos

1.4k

Fork Fullscreen

<div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
  <div class="text-center">
    <img class="h-8 w-auto mx-auto" src="https://www.svgrepo.com/show/353414/apple.svg" alt="Apple">
    <h2 class="mt-6 text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Sign in to your account</h2>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
      Don't have an account?
      <a href="/" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-300">Sign Up →</a>
    </p>
  </div>

<form class="space-y-6 mt-8">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email address</label>
      <div class="mt-1">
        <input class="appearance-none block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none sm:text-sm border-gray-300 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-white focus:ring-indigo-500 focus:border-indigo-500" id="email" wire:model.defer="email" type="email" autocomplete="email" placeholder="your@email.com" required autofocus>
      </div>
    </div>

<div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
      <div class="mt-1">
        <input class="appearance-none block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none sm:text-sm border-gray-300 placeholder-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-white focus:ring-indigo-500 focus:border-indigo-500" id="password" wire:model.defer="password" type="password" placeholder="••••••••" required>
      </div>
    </div>

<div class="flex items-center justify-between">
      <div class="flex items-center">
        <input id="remember_me"  type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
        <label for="remember" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
      </div>
      <div class="text-sm">
        <a href="" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-300">Forgot your password?</a>
      </div>
    </div>

Related Examples

Sign up Form - Page

Author:
ABDO-SY

7 months ago

913
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

5 months ago

872
Login form

Author:
Leon Bachmann

2 years ago

14.7k
Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

2k
Login

Author:
Amine Ghanim

6 months ago

745
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

42.3k
Login Form

Author:
Amit Pachange

3 years ago

12.6k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.2k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

1 day ago

5
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

6 months ago

464
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Author:
Nishimwe Jeanine

4 months ago

410
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

11 months ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components