generated from dwd/boilarplate-astro-tailwind
43 lines
2.0 KiB
Plaintext
43 lines
2.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dark Themed Login Page</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
background: url('/img/bg-3.jpg') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-black bg-opacity-80 flex justify-center items-center">
|
|
|
|
<div class="bg-gray-900/60 bg-opacity-90 shadow-lg rounded-lg w-full max-w-md p-8">
|
|
<h2 class="text-3xl font-bold text-center text-white mb-6">Welcome Back</h2>
|
|
|
|
<div class="flex justify-center mb-8">
|
|
<img src="https://via.placeholder.com/80" alt="Login Icon" class="w-20 h-20 rounded-full border-4 border-gray-700 shadow-lg">
|
|
</div>
|
|
|
|
<form>
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-gray-300 font-medium mb-2">Email</label>
|
|
<input type="email" id="email" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your email">
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="password" class="block text-gray-300 font-medium mb-2">Password</label>
|
|
<input type="password" id="password" class="bg-transparent w-full px-4 py-2 bg-gray-800 text-gray-300 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-400" placeholder="Enter your password">
|
|
</div>
|
|
<button class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 rounded-lg transition-all duration-200">Login</button>
|
|
</form>
|
|
|
|
<p class="text-center text-gray-400 mt-4">Don't have an account?
|
|
<a href="#" class="text-teal-400 hover:underline">Sign up</a>
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|