다크 테마 로그인 폼

현대적인 다크 테마 로그인 폼입니다. 소셜 로그인 옵션과 기억하기 체크박스를 포함합니다.

loginformdark-themeui-design
Gist 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  body {
    background: #09090b;
    color: #fafafa;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-card {
    background: #18181b;
    border: 1px solid #27272a;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  }
  h2 { margin-top: 0; text-align: center; }
  .form-group { margin-bottom: 20px; }
  label { display: block; margin-bottom: 8px; font-size: 14px; color: #a1a1aa; }
  input[type="email"], input[type="password"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    background: #09090b;
    border: 1px solid #27272a;
    color: white;
    box-sizing: border-box;
  }
  input:focus { outline: none; border-color: #3b82f6; }
  .options { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 24px; }
  .btn-login {
    width: 100%;
    padding: 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
  }
  .divider { position: relative; text-align: center; margin: 20px 0; border-bottom: 1px solid #27272a; }
  .divider span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #18181b; padding: 0 10px; color: #a1a1aa; font-size: 12px; }
  .social-btns { display: flex; gap: 10px; }
  .btn-social { flex: 1; padding: 10px; background: #27272a; border: 1px solid #3f3f46; color: white; border-radius: 6px; cursor: pointer; }
</style>
</head>
<body>
  <div class="login-card">
    <h2>Login</h2>
    <form>
      <div class="form-group">
        <label>Email</label>
        <input type="email" placeholder="example@email.com">
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" placeholder="••••••••">
      </div>
      <div class="options">
        <label><input type="checkbox"> Remember me</label>
        <a href="#" style="color: #3b82f6; text-decoration: none;">Forgot password?</a>
      </div>
      <button type="submit" class="btn-login">Sign In</button>
    </form>
    <div class="divider"><span>OR CONTINUE WITH</span></div>
    <div class="social-btns">
      <button class="btn-social">Google</button>
      <button class="btn-social">Github</button>
    </div>
  </div>
</body>
</html>