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

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

SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

5 months ago

997
Instagram Login Clone

Author:
Victoria Blount

1 month ago

54
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

7 months ago

1.1k
Login form #1
login form design

Author:
QQ-VVN

2 months ago

33
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

2 months ago

466
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.3k
Login Form

Author:
Amit Pachange

3 years ago

12.3k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

1.9k
Sample login form

Author:
Orestis Tsakiridis

9 months ago

1k
Login template

Author:
Gabriel Urbano

1 year ago

5.7k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.2k
Tailwind login page

Author:
Kofi Osei

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components