@SudhuCodes
Category - TailwindCSS
Uploaded At - 4/20/2025
1<!DOCTYPE html>2<!-- ----------Code with SudhuCodes--------- -->3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>SudhuCodes - Modern Login Form</title>8 <script src="https://cdn.tailwindcss.com"></script>9</head>10<body class="bg-[url('./images/background-image.png')] bg-center h-screen flex items-center justify-center bg-no-repeat bg-cover">1112<div class="bg-gray-800/50 backdrop-blur-lg p-12 rounded-xl shadow-xl w-full max-w-md">13 <h2 class="text-center text-3xl font-bold text-gray-100 mb-8">Login Now</h2>1415 <div class="mb-6">16 <label for="username" class="block text-gray-400 font-medium mb-2">Username</label>17 <input type="text" id="username" class="w-full px-4 py-2 bg-gray-900 text-gray-300 border border-gray-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-transparent placeholder-gray-500" placeholder="Enter your username">18 </div>1920 <div class="mb-6">21 <label for="password" class="block text-gray-400 font-medium mb-2">Password</label>22 <input type="password" id="password" class="w-full px-4 py-2 bg-gray-900 text-gray-300 border border-gray-700 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-transparent placeholder-gray-500" placeholder="Enter your password">23 </div>2425 <div class="flex justify-end items-center mb-6">26 <a href="#" class="text-indigo-400 hover:text-indigo-500 text-sm">Forgot Password?</a>27 </div>2829 <button class="w-full py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-all">Login</button>3031 <div class="text-center text-gray-400 mt-6">32 Don't have an account?33 <a href="#" class="text-indigo-400 hover:text-indigo-500 font-semibold">Sign up</a>34 </div>35</div>3637</body>38</html>