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

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

Neon login Form #3
Login form neon design.

Author:
QQ-VVN

6 months ago

483
login!!!!
html , css

Author:
Hacker Development

6 months ago

942
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

1 year ago

2.9k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1k
Login with google provider
Login with google provider

Author:
Aman kumar

7 months ago

972
Login form

Author:
ariaw

4 weeks ago

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

Author:
Wagner

10 months ago

1.6k
Simple Login Form
Username and Password inputs with Login button. Very simple. You might like it.

Author:
Jerome Soriano

1 year ago

1.7k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

9.7k
Login Form with Icon

Author:
Prashant

3 years ago

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

Author:
ardianhu

1 year ago

2.7k
Login form

Author:
Aman kumar

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components