Neobrutalist Light Blue Auth Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="brutalform-box" onsubmit="return false;"><h3>Welcome,</h3><p>sign up to continue</p><input type="email" placeholder="Email" required><input type="password" placeholder="Password" required><div class="brutalform-socials"><button type="button">t</button><button type="button">G</button><button type="button">f</button></div><button type="submit" class="brutalform-submit">Let's go →</button></form>

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

.brutalform-box { width: 200px; background: #a5f3fc; border: 2.5px solid #000000; box-shadow: 4px 4px 0 #000000; border-radius: 12px; padding: 18px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.brutalform-box h3 { margin: 0; font-size: 14px; font-weight: 900; color: #000; }
.brutalform-box p { margin: 2px 0 14px; font-size: 8px; font-weight: 700; color: #334155; }
.brutalform-box input { width: 100%; background: #fef9c3; border: 2px solid #000; border-radius: 6px; padding: 7px 8px; font-size: 9px; font-weight: 700; color: #000; margin-bottom: 8px; outline: none; box-sizing: border-box; }
.brutalform-socials { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.brutalform-socials button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #000; background: #fff; font-weight: 900; font-size: 9px; cursor: pointer; }
.brutalform-submit { width: 100%; background: #fef9c3; border: 2px solid #000; box-shadow: 2px 2px 0 #000; border-radius: 6px; padding: 7px; font-size: 9px; font-weight: 900; color: #000; cursor: pointer; }
.brutalform-submit:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }