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

656

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

Login form with fully functionl and best
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Author:
Sufyan jutt

2 months ago

211
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Author:
Nishimwe Jeanine

7 months ago

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

Author:
Wagner

1 year ago

1.6k
Login

Author:
Amine Ghanim

9 months ago

2.1k
Sign In page with google/facebook/twitter buttons
sanjay

Author:
Sanjay Kumar

2 days ago

10
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

763
Login page
Login and register page, you can reuse both

Author:
Abhiraj

11 months ago

1.8k
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:
Mohit Prajapat

9 months ago

685
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

10 months ago

962
login
login by : html , css

Author:
Hacker Development

8 months ago

1.5k
Quick Signup Form

Author:
Paul Intay

1 year ago

2.8k
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. 😊🎨

Author:
Ari Mustofa

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components