A minimal login form card designed for authentication pages and modal dialogs. Focused on clarity and usability, making it easy for users to sign in without distractions.
HTML
<form class="login-form">
<h3>Welcome Back</h3>
<p>Please sign in to your account</p>
<input type="email" placeholder="Email address" required>
<input type="password" placeholder="Password" required>
<button type="submit">Sign In</button>
</form>CSS
.login-form{
max-width:420px;
margin:auto;
padding:28px;
border-radius:18px;
background:#f8fafc;
display:grid;
gap:14px;
}
.login-form h3{
font-size:20px;
margin-bottom:2px;
}
.login-form p{
font-size:14px;
color:#64748b;
margin-bottom:8px;
}
.login-form input{
padding:14px;
border-radius:12px;
border:1px solid #e5e7eb;
font-size:14px;
outline:none;
}
.login-form button{
margin-top:6px;
padding:14px;
border-radius:12px;
border:none;
background:#2563eb;
color:#ffffff;
font-size:14px;
cursor:pointer;
}Notes
- Minimal and focused UI
- Perfect for login pages
- Clean input structure
- Easy to style further
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.