Home
QQ-VVN
Login Form simple

Login Form simple

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

Author QQ-VVN

424

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-purple-700 via-pink-700 to-red-700 p-4 relative overflow-hidden">
  
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzkuNSAzOTguNWwtNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4=')] opacity-20"></div>
    <div class="absolute -top-40 -left-40 w-80 h-80 bg-pink-500/30 rounded-full filter blur-3xl"></div>
    <div class="absolute top-0 -right-20 w-80 h-80 bg-purple-500/20 rounded-full filter blur-3xl"></div>
    <div class="absolute bottom-40 left-20 w-80 h-80 bg-red-500/20 rounded-full filter blur-3xl"></div>
  </div>
  
  <div class="w-full max-w-md backdrop-blur-xl bg-white/10 rounded-2xl overflow-hidden shadow-2xl border border-white/20 relative z-10">
    <div class="p-8">
      <div class="text-center mb-8">
        <div class="inline-block p-3 bg-white/10 rounded-full mb-4">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
          </svg>
        </div>
        <h2 class="text-3xl font-bold text-white mb-2">Hoş Geldiniz</h2>
        <p class="text-white/80">Hesabınıza giriş yapın</p>
      </div>
      
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-white/90 mb-2">E-posta</label>
          <input type="email" id="email" name="email" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/20 transition-all duration-300" placeholder="ornek@mail.com">
        </div>
        
        <div>
          <label for="password" class="block text-sm font-medium text-white/90 mb-2">Şifre</label>
          <input type="password" id="password" name="password" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/50 focus:ring-2 focus:ring-white/20 transition-all duration-300" placeholder="••••••••">
        </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-purple-600 focus:ring-purple-500 border-white/20 rounded bg-white/10">
            <label for="remember-me" class="ml-2 block text-sm text-white/80">Beni hatırla</label>
          </div>
          <a href="#" class="text-sm font-medium text-white hover:text-white/80 transition-colors duration-300">Şifremi unuttum</a>
        </div>
        
        <button type="submit" class="w-full py-3 px-4 bg-white text-purple-700 font-medium rounded-lg shadow-lg shadow-purple-700/30 hover:bg-white/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-purple-700 transition-all duration-300">
          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-white/20"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-transparent text-white/60">veya şununla devam et</span>
          </div>
        </div>
        
        <div class="mt-6 grid grid-cols-3 gap-3">
          <button class="flex justify-center items-center py-2 px-4 bg-white/10 hover:bg-white/20 text-white rounded-lg border border-white/20 transition-colors duration-300">
            <svg class="h-5 w-5" 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="flex justify-center items-center py-2 px-4 bg-white/10 hover:bg-white/20 text-white rounded-lg border border-white/20 transition-colors duration-300">
            <svg class="h-5 w-5" 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="flex justify-center items-center py-2 px-4 bg-white/10 hover:bg-white/20 text-white rounded-lg border border-white/20 transition-colors duration-300">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.793-.261.793-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.386-1.332-1.755-1.332-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.605-.015 2.895-.015 3.285 0 .315.18.69.8.57C20.565 21.795 24 17.295 24 12c0-6.627-5.373-12-12-12z"/>
            </svg>
          </button>
        </div>
      </div>
      
      <p class="mt-8 text-center text-sm text-white/80">
        Hesabınız yok mu?
        <a href="#" class="font-medium text-white hover:text-white/80 transition-colors duration-300">Hemen kaydolun</a>
      </p>
    </div>
  </div>
</div>

</div>

Related Examples

Instagram Login Clone

Author:
Victoria Blount

4 months ago

273
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

8 months ago

1.6k
Sign In form

Author:
Amit Pachange

2 years ago

12k
Login form
responsive login page design

Author:
Aman kumar

1 year ago

4.3k
Sign in form

Author:
Simon Scheffer

2 years ago

15.8k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

1 day ago

4
Login

Author:
Amine Ghanim

6 months ago

745
User registration form with Instructions

Author:
Fagundo67

2 years ago

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

Author:
Ameth Galarcio

1 year ago

2.3k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

4 months ago

729
Sign up Form - Page

Author:
ABDO-SY

7 months ago

913
login
Dark mode login

Author:
Hacker Development

5 months ago

953

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components