Retro Grey Social Auth Panel

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="greypanel-form" onsubmit="return false;"><h3>Welcome,</h3><p>sign in to continue</p><button type="button" class="greypanel-btn"><span>G</span> Continue with Google</button><button type="button" class="greypanel-btn"><span>🐙</span> Continue with Github</button><div class="greypanel-divider">OR</div><input type="email" placeholder="Email" required><button type="submit" class="greypanel-submit">Continue »</button></form>

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

.greypanel-form { width: 210px; background: #e2e8f0; border: 2.5px solid #1e293b; box-shadow: 5px 5px 0 #1e293b; border-radius: 10px; padding: 18px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.greypanel-form h3 { margin: 0; font-size: 14px; font-weight: 900; color: #0f172a; }
.greypanel-form p { margin: 2px 0 12px; font-size: 8px; font-weight: 700; color: #64748b; }
.greypanel-btn { width: 100%; background: #ffffff; border: 2px solid #1e293b; border-radius: 6px; padding: 6px; font-size: 8px; font-weight: 800; color: #0f172a; margin-bottom: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.greypanel-divider { text-align: center; font-size: 7px; font-weight: 900; color: #64748b; margin: 8px 0; }
.greypanel-form input { width: 100%; background: #ffffff; border: 2px solid #1e293b; border-radius: 6px; padding: 6px; font-size: 8px; outline: none; margin-bottom: 8px; box-sizing: border-box; }
.greypanel-submit { width: 100%; background: #ffffff; border: 2px solid #1e293b; border-radius: 6px; padding: 6px; font-size: 8px; font-weight: 900; color: #0f172a; cursor: pointer; }