Login Form

1<div class="container d-flex align-items-center justify-content-center min-vh-100">
2  <div class="card border-0 shadow-lg p-4 p-md-5" style="max-width: 420px; width: 100%;">
3    <div class="text-center mb-4">
4      <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
5        style="width:52px;height:52px;background:#E8F0FB;">
6        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#1B3A6B" viewBox="0 0 16 16">
7          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.029 10 8 10c-2.029 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
8        </svg>
9      </div>
10      <h4 class="fw-bold">Welcome back</h4>
11      <p class="text-muted small">Sign in to your account to continue</p>
12    </div>
13    <form>
14      <div class="mb-3">
15        <label for="email" class="form-label fw-medium small">Email address</label>
16        <input type="email" class="form-control rounded-3" id="email"
17          placeholder="you@example.com">
18      </div>
19      <div class="mb-3">
20        <div class="d-flex justify-content-between">
21          <label for="password" class="form-label fw-medium small">Password</label>
22          <a href="#" class="text-decoration-none small" style="color:#4A90D9;">Forgot password?</a>
23        </div>
24        <input type="password" class="form-control rounded-3" id="password"
25          placeholder="••••••••">
26      </div>
27      <div class="mb-4 form-check">
28        <input type="checkbox" class="form-check-input" id="rememberMe">
29        <label class="form-check-label small text-muted" for="rememberMe">Remember me for 30 days</label>
30      </div>
31      <button type="submit" class="btn w-100 rounded-pill py-2 fw-semibold text-white"
32        style="background:#1B3A6B;">Sign in</button>
33    </form>
34    <hr class="my-4">
35    <div class="text-center small text-muted">
36      Don't have an account? <a href="#" class="text-decoration-none fw-medium" style="color:#4A90D9;">Sign up free</a>
37    </div>
38  </div>
39</div>