Passwordless Magic Link Login Box

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="magiclogin-card" onsubmit="return false;"><div class="magic-badge">✨ Passwordless</div><h3>Magic Link Login</h3><p>We'll send a secure login link straight to your inbox.</p><input type="email" placeholder="name@company.com" required><button type="submit">Send Magic Link ✨</button></form>

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

.magiclogin-card { width: 210px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; text-align: center; margin: auto; box-sizing: border-box; }
.magic-badge { display: inline-block; background: #faf5ff; color: #9333ea; font-size: 6px; font-weight: 800; padding: 2px 6px; border-radius: 10px; margin-bottom: 6px; }
.magiclogin-card h3 { margin: 0; font-size: 12px; font-weight: 800; color: #0f172a; }
.magiclogin-card p { margin: 4px 0 12px; font-size: 7px; color: #64748b; line-height: 1.3; }
.magiclogin-card input { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 8px; font-size: 8px; outline: none; margin-bottom: 10px; box-sizing: border-box; }
.magiclogin-card button { width: 100%; background: #9333ea; color: #ffffff; border: none; border-radius: 8px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; }