Stay in the Loop Signup Card

<form class='nl' id='nlf'><h3>Stay in the loop</h3><p>Weekly updates on new components and releases. No spam.</p><div class='nl-r'><input type='email' placeholder='Enter your email' required aria-label='Email'><button type='submit'><span>Subscribe</span><svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></div><small>Unsubscribe anytime. We never share your email.</small></form>

.nl{width:min(380px,92%);margin:auto;padding:26px;background:#fff;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);font-family:Inter,Arial,sans-serif;color:#111}.nl h3{margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.015em}.nl p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#737373}.nl-r{display:flex;gap:8px}.nl input{flex:1;min-width:0;height:42px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #efefef;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.nl input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.nl input::placeholder{color:#a3a3a3}.nl button{display:flex;align-items:center;gap:7px;padding:0 18px;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;white-space:nowrap}.nl small{display:block;margin-top:12px;font-size:12px;color:#8a8a8a}

const f=document.getElementById('nlf'),b=f.querySelector('button span');f.addEventListener('submit',e=>{e.preventDefault();b.textContent='Subscribed ✓';setTimeout(()=>{b.textContent='Subscribe';f.reset()},2200)});