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 428 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

Login form

Leon Bachmann

3 years ago

14k
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Shariar Hasan

2 years ago

4k
Login form

ariaw

10 months ago

1.3k
Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs
This sleek, fully responsive login form is designed with usability and aesthetics in mind. It features a clean, minimalistic design with smooth transitions and modern UI elements. The form includes: Email and Password Inputs: Both fields feature floating labels that animate seamlessly when focused or filled, ensuring a visually appealing user experience. Input validation is built-in, and placeholders are hidden for a clean look. Social Media Login Buttons: Integrated Google and Facebook sign-in buttons, allowing users to authenticate easily using their social media accounts. These buttons are styled to match the platform’s branding and include an intuitive hover effect to enhance interactivity. “Forgot Password?” & “Remember Me” Options: The form allows users to easily reset their password or opt to remain logged in. These options are aligned neatly, and the labels are clear and concise for accessibility. Custom Styling: Built with Tailwind CSS, ensuring a responsive, mobile-first design that adapts seamlessly to any screen size. The form's design utilizes smooth hover effects, rounded corners, subtle shadow effects, and modern color schemes for an enhanced visual appeal. Easy Integration: This component can be easily integrated into any web application. Whether you're building a dashboard, a website, or a SaaS product, this login form is a perfect fit for any modern application that needs secure user authentication. Features: Fully responsive: Looks great on mobile, tablet, and desktop. Floating labels: Clear input fields with animated labels that enhance the user interface. Social Media Integration: Includes Google and Facebook login options for quick authentication. Password Reset: A "Forgot Password?" link allows for easy password recovery. Remember Me: A checkbox for staying logged in. Customizable Design: Built using Tailwind CSS, easy to adapt to match any branding. Smooth Interactivity: Subtle hover effects and animations for a modern user experience. This login form not only provides the essential features needed for user authentication but also elevates the user experience with its modern design and smooth animations.

Jay Dee

1 year ago

1.8k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Sufyan jutt

7 months ago

514
Sign up form

Rajesh Maheshwari

1 year ago

1.6k
Fullscreen login form with image backround

Noah Schmidt

3 years ago

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

Abhiraj

1 year ago

3.8k
Fullscreen login form with image backround

Rithik

2 years ago

2.7k
Sign up
sign up page

gidy

1 year ago

2k
Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Shariar Hasan

2 years ago

4.5k
Responsive login form with image

Anonymous

2 years ago

2.2k