A minimal login form with remember me built with pure HTML and CSS that combines essential input fields with a persistent login option. It enhances user convenience and streamlined authentication clarity in clean UI layouts.
Usage
Use this component when interfaces require simple and efficient login flows, such as SaaS platforms, dashboards, membership sites, or web applications that benefit from persistent user sessions.
Implementation
The layout is implemented using a compact form structure with aligned input fields and a checkbox control, styled using CSS for spacing, alignment, and responsive behavior across screen sizes.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="card">
<div class="brand">
<svg class="brand-mark" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#0f2318"/>
<path d="M16 6 C16 6, 26 10, 26 20 C26 25, 21 27, 16 27 C16 27, 16 18, 10 14 C13 13, 16 6, 16 6Z" fill="#4caf78"/>
<path d="M16 27 C16 20, 12 16, 9 13" stroke="#2e7d52" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="brand-name">Leafy</span>
</div>
<h1 class="heading">Welcome <em>back.</em></h1>
<p class="subheading">Sign in to continue to your workspace</p>
<form action="#" method="post" novalidate>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com" autocomplete="email" required />
</div>
<div class="field">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
</div>
<div class="row">
<label class="remember" for="remember">
<input type="checkbox" id="remember" name="remember" />
<span class="toggle-track">
<span class="toggle-thumb"></span>
</span>
<span class="remember-text">Remember me</span>
</label>
<a href="#" class="forgot">Forgot password?</a>
</div>
<button type="submit" class="btn">Sign In</button>
</form>
<div class="divider">
<span class="divider-line"></span>
<span class="divider-text">OR</span>
<span class="divider-line"></span>
</div>
<p class="signup-text">No account? <a href="#">Create one</a></p>
</div>
</body>
</html>CSS
*::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--ink: #0f2318;
--paper: #f0f7f2;
--accent: #2e7d52;
--accent-light: #4caf78;
--muted: #5c7a67;
--border: #c2dace;
--field-bg: #e4f0e9;
--shadow: 0 2px 24px rgba(15, 35, 24, 0.10);
}
html, body {
height: 100%;
}
body {
font-family: 'DM Sans', sans-serif;
background-color: var(--paper);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image:
radial-gradient(ellipse 80% 60% at 70% 20%, rgba(46, 125, 82, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 10% 80%, rgba(15, 35, 24, 0.05) 0%, transparent 60%);
}
/* ── Card ── */
.card {
width: 100%;
max-width: 400px;
padding: 52px 44px 44px;
background: #fff;
border: 1px solid var(--border);
box-shadow: var(--shadow);
animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Brand ── */
.brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 36px;
}
.brand-mark {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.brand-name {
font-family: 'DM Serif Display', serif;
font-size: 1.15rem;
letter-spacing: 0.01em;
color: var(--ink);
}
/* ── Headings ── */
.heading {
font-family: 'DM Serif Display', serif;
font-size: 1.85rem;
line-height: 1.15;
color: var(--ink);
margin-bottom: 6px;
}
.heading em {
font-style: italic;
color: var(--accent);
}
.subheading {
font-size: 0.82rem;
font-weight: 300;
color: var(--muted);
margin-bottom: 36px;
letter-spacing: 0.01em;
}
/* ── Fields ── */
.field {
margin-bottom: 18px;
}
label {
display: block;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 7px;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 11px 14px;
background: var(--field-bg);
border: 1px solid transparent;
border-bottom-color: var(--border);
font-family: 'DM Sans', sans-serif;
font-size: 0.92rem;
font-weight: 400;
color: var(--ink);
outline: none;
transition: border-color 0.2s, background 0.2s;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
input[type="email"]:focus,
input[type="password"]:focus {
background: #fff;
border-color: transparent;
border-bottom-color: var(--accent);
}
input::placeholder {
color: #bbb8b2;
font-weight: 300;
}
/* ── Remember Me row ── */
.row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 22px 0 28px;
}
.remember {
display: flex;
align-items: center;
gap: 9px;
cursor: pointer;
user-select: none;
}
.remember input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-track {
position: relative;
width: 34px;
height: 18px;
background: var(--border);
border-radius: 100px;
transition: background 0.25s;
flex-shrink: 0;
}
.toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
}
.remember input[type="checkbox"]:checked + .toggle-track {
background: var(--accent);
}
.remember input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
transform: translateX(16px);
}
.remember input[type="checkbox"]:focus-visible + .toggle-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.remember-text {
font-size: 0.8rem;
font-weight: 400;
color: var(--muted);
}
/* ── Forgot link ── */
.forgot {
font-size: 0.78rem;
font-weight: 400;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.forgot:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ── Submit button ── */
.btn {
display: block;
width: 100%;
padding: 13px;
background: var(--ink);
color: var(--paper);
font-family: 'DM Sans', sans-serif;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
border-radius: 0;
-webkit-appearance: none;
}
.btn:hover {
background: var(--accent);
}
.btn:active {
transform: scale(0.99);
}
/* ── Divider ── */
.divider {
display: flex;
align-items: center;
gap: 14px;
margin: 28px 0;
}
.divider-line {
flex: 1;
height: 1px;
background: var(--border);
}
.divider-text {
font-size: 0.72rem;
font-weight: 400;
color: var(--border);
letter-spacing: 0.06em;
}
/* ── Sign up link ── */
.signup-text {
text-align: center;
font-size: 0.8rem;
font-weight: 300;
color: var(--muted);
}
.signup-text a {
color: var(--ink);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid var(--ink);
transition: color 0.2s, border-color 0.2s;
}
.signup-text a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Includes remember me checkbox option
- Enhances user convenience and session persistence clarity
- Fully responsive across breakpoints
- Suitable for SaaS and web applications
- Easy to customize spacing and checkbox styling
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.