Login form #1

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author QQ-VVN

Tailwind v3.4 673 2

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-black p-4">
  <div class="w-full max-w-md backdrop-blur-xl bg-white/10 rounded-2xl overflow-hidden shadow-xl">
    <div class="p-8">
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold text-white mb-2">Hoş Geldiniz</h2>
        <p class="text-gray-300">Hesabınıza giriş yapın</p>
      </div>
      
      <form class="space-y-6">
        <div class="space-y-2">
          <label class="text-sm font-medium text-gray-300 block">E-posta</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
            <input type="email" class="bg-gray-800/50 border border-gray-700 text-white placeholder-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-3" placeholder="ornek@mail.com" required>
          </div>
        </div>
        
        <div class="space-y-2">
          <label class="text-sm font-medium text-gray-300 block">Şifre</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="password" class="bg-gray-800/50 border border-gray-700 text-white placeholder-gray-400 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-3" placeholder="••••••••" required>
          </div>
        </div>
        
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 rounded bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-300">Beni hatırla</label>
          </div>
          <a href="#" class="text-sm font-medium text-blue-400 hover:text-blue-300">Şifremi unuttum</a>
        </div>
        
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Giriş Yap
        </button>
      </form>
      
      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-gray-800/50 text-gray-400">veya şununla devam et</span>
          </div>
        </div>
        
        <div class="mt-6 grid grid-cols-3 gap-3">
          <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
            </svg>
          </button>
          <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
              <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
            </svg>
          </button>
          <button class="w-full flex items-center justify-center py-2 px-4 border border-gray-700 rounded-lg shadow-sm bg-gray-800 hover:bg-gray-700 transition-colors duration-300">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
            </svg>
          </button>
        </div>
      </div>
      
      <p class="mt-8 text-center text-sm text-gray-400">
        Hesabınız yok mu?
        <a href="#" class="font-medium text-blue-400 hover:text-blue-300">Hemen kaydolun</a>
      </p>
    </div>
  </div>
</div>

</div>

Related Examples

Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

AyDin VM

2 years ago

5.3k
Login form

Rajesh Maheshwari

1 year ago

2.6k
Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS
A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

Homayoun

10 months ago

669
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Akram Khan

2 years ago

3.5k
Sign in / Login Form

Bunny

4 years ago

14.6k
Login Form
Bigger input field Login form. like bootstrap input-lg

muhittin budak

1 year ago

1.1k
Sign up form

Rajesh Maheshwari

1 year ago

1.8k
Sign Up Form
A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

JUGENDRA GANGWAR

1 month ago

92
Responsive login form
form with social login buttons

Anonymous

9 months ago

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

Anja Müller

3 years ago

8.8k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

nicoleshal07

1 year ago

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.

Rajesh Pandey

1 year ago

1.7k