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

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

Login form responsive

Author:
Aman kumar

1 year ago

3.4k
Sample login form

Author:
Orestis Tsakiridis

1 year ago

1.3k
Login
Login Creen office

Author:
Rushikesh Latpate

10 months ago

1.1k
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

5 months ago

610
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

3 weeks ago

25
Sign-in form - Htmlwind
Simple login form

Author:
Htmlwind

5 months ago

513
Login screen
Reward login screen

Author:
ehmasuk

1 month ago

143
OTPverification

Author:
Ratikanta Pradhan

3 months ago

433
login
html , css

Author:
Hacker Development

5 months ago

383
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.4k
Login form

Author:
Gopi Yadav

3 years ago

11k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components