<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frosted Glass Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
body {
background-image: url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?q=80&w=2070');
background-size: cover;
background-position: center;
height: 100vh;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen p-6">
<div class="glass rounded-2xl p-8 w-full max-w-md">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-white mb-2">Login</h2>
<p class="text-gray-200">Please sign in to continue</p>
</div>
<form>
<div class="space-y-5">
<div>
<label for="email" class="block text-gray-200 mb-2 font-medium">Email</label>
<input
type="email"
id="email"
class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200"
placeholder="Enter your email"
>
</div>
<div>
<label for="password" class="block text-gray-200 mb-2 font-medium">Password</label>
<input
type="password"
id="password"
class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 transition duration-200"
placeholder="Enter your password"
>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<input
type="checkbox"
id="remember"
class="h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-blue-400"
>
<label for="remember" class="ml-2 text-sm text-gray-200">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-300 hover:text-blue-400 transition duration-200">Forgot password?</a>
</div>
<button
type="submit"
class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition duration-300 ease-in-out hover:opacity-90"
>
Sign In
</button>
</div>
</form>
<div class="mt-7 text-center">
<p class="text-gray-200">
Don't have an account?
<a href="#" class="font-medium text-blue-300 hover:text-blue-400 transition duration-200">Sign up</a>
</p>
</div>
<div class="mt-8 flex items-center justify-center space-x-4">
<button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition duration-200">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</button>
<button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition duration-200">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<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>
<button class="p-2 rounded-full bg-white/10 hover:bg-white/20 transition duration-200">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm3.61 6.34c1.07 0 1.93.86 1.93 1.93 0 1.07-.86 1.93-1.93 1.93-1.07 0-1.93-.86-1.93-1.93 0-1.06.86-1.93 1.93-1.93zm-6-1.58c1.3 0 2.36 1.06 2.36 2.36 0 1.3-1.06 2.36-2.36 2.36s-2.36-1.06-2.36-2.36c0-1.31 1.05-2.36 2.36-2.36zm0 9.13v3.75c-2.4-.75-4.3-2.6-5.14-4.96 1.05-1.12 3.67-1.69 5.14-1.69.53 0 1.2.08 1.9.22-1.64.87-1.9 2.02-1.9 2.68zM12 20c-.27 0-.53-.01-.79-.04v-4.07c0-1.42 2.94-2.13 4.4-2.13 1.07 0 2.92.39 3.84 1.15-1.17 2.97-4.06 5.09-7.45 5.09z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</body>
</html>
Projects 
Teams
Account
