Login Form HTML Template
Give users a simple, centered login experience with subtle glassmorphism styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign in | Arc Dashboard</title>
<style>
body { margin: 0; font-family: 'Inter', sans-serif; min-height: 100vh; background: linear-gradient(120deg,#0f172a,#1e1b4b); display: grid; place-items: center; }
.card { width: min(380px, 90vw); padding: 2.5rem; border-radius: 1.5rem; backdrop-filter: blur(25px); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; }
h1 { margin-bottom: 0.5rem; }
p { color: rgba(255,255,255,0.7); margin-bottom: 2rem; }
label { display: block; margin-bottom: 0.35rem; }
input { width: 100%; border-radius: 0.9rem; border: 1px solid rgba(255,255,255,0.3); background: rgba(15,23,42,0.4); color: white; padding: 0.85rem 1rem; margin-bottom: 1rem; }
.row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
button { width: 100%; border: none; border-radius: 999px; padding: 0.9rem; background: #f472b6; color: #2b0f33; font-weight: 700; margin-top: 1rem; cursor: pointer; }
a { color: #fbcfe8; text-decoration: none; }
</style>
</head>
<body>
<section class="card">
<h1>Welcome back</h1>
<p>Sign in to manage analytics, campaigns, and billing.</p>
<form>
<label for="email">Email</label>
<input id="email" type="email" required />
<label for="password">Password</label>
<input id="password" type="password" required />
<div class="row">
<label><input type="checkbox" /> Remember me</label>
<a href="#">Forgot password?</a>
</div>
<button type="submit">Sign in</button>
</form>
</section>
</body>
</html>