Dark Cyber Console Login Box

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="cyber-dark-card" onsubmit="return false;"><h3>SIGN IN</h3><div class="cd-group"><label>USER ID</label><input type="text" placeholder="alex.dev"></div><div class="cd-group"><label>PASSPHRASE</label><input type="password" placeholder="••••••••"></div><button type="submit">AUTHORIZE</button></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.cyber-dark-card { width: 200px; background: #09090b; border: 1px solid #27272a; border-radius: 14px; padding: 18px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.cyber-dark-card h3 { margin: 0 0 14px; font-size: 12px; font-weight: 900; color: #f4f4f5; text-align: center; letter-spacing: 1px; }
.cd-group { margin-bottom: 10px; }
.cd-group label { display: block; font-size: 6px; font-weight: 800; color: #a1a1aa; margin-bottom: 3px; letter-spacing: 0.5px; }
.cd-group input { width: 100%; background: #18181b; border: 1px solid #27272a; border-radius: 6px; padding: 6px 8px; font-size: 8px; color: #f4f4f5; outline: none; box-sizing: border-box; }
.cd-group input:focus { border-color: #06b6d4; }
.cyber-dark-card button { width: 100%; background: #06b6d4; color: #000000; border: none; border-radius: 6px; padding: 8px; font-size: 8px; font-weight: 900; letter-spacing: 1px; cursor: pointer; margin-top: 4px; }