Home
Dmitriy Dronov
Sign-In Form with Tailwind CSS

Sign-In Form with Tailwind CSS

Elegant sign in form

This tailwind example is contributed by Dmitriy Dronov, on 28-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

Login Form

Author Dmitriy Dronov

117

Fork Fullscreen

<div class="max-w-lg mx-auto bg-white dark:bg-gray-900 rounded-lg p-6">
  <div class="text-center">
    <img class="h-10 w-auto mx-auto" src="https://i.ibb.co/x6c9xcM/logo.png" alt="Pramen">
    <h2 class="mt-3 text-3xl font-medium tracking-tight text-gray-900 dark:text-white">Добро пожаловать</h2>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
      Введите данные для входа
    </p>
  </div>

<form class="space-y-6 mt-8">
    <div>
      <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="Введите ваш логин" required autofocus>
      </div>
    </div>

<div>
      <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>
      <button type="submit" class="inline-flex items-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 text-base bg-violet-600 font-medium text-white hover:bg-violet-800 focus:ring-black w-full justify-center">Войти</button>
    </div>

<div class="flex items-center justify-center">
      <div class="flex items-center">
        <label for="remember" class="ml-2 block text-sm text-gray-500 dark:text-gray-300">Нет аккаунта?</label>
      </div>
      <span class="m-2"></span>
      <div class="text-sm">
        <a href="" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-300">Получить доступ</a>
      </div>
    </div>
  </form>
</div>

Related Examples

Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

3 months ago

568
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

19.6k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

3 months ago

499
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

1 year ago

13k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

2 months ago

633
Login form

Author:
Gopi Yadav

1 year ago

8.9k
Login form responsive

Author:
Aman kumar

8 months ago

1.9k
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

8.6k
Login popup
with social media login buttons

Author:
Nikolai

6 months ago

1.5k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

9k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 month ago

36
User registration form

Author:
Laurits

1 year ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8