Welcome Back Sign In Form

<form class='lg' id='lgf'><h3>Welcome back</h3><p class='lg-s'>Sign in to continue to your account.</p><label for='lg1'>Email</label><input id='lg1' type='email' placeholder='you@company.com' required><div class='lg-h'><label for='lg2'>Password</label><a href='#'>Forgot password?</a></div><div class='lg-w'><input id='lg2' type='password' placeholder='Enter your password' required><button type='button' id='lge' aria-label='Show password'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg></button></div><label class='lg-c'><input type='checkbox'><span></span>Remember me for 30 days</label><button type='submit' class='lg-go'>Sign in <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><p class='lg-f'>Don't have an account? <a href='#'>Create one</a></p></form>

.lg{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.lg h3{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.01em}.lg-s{margin:0 0 20px;font-size:13.5px;color:#737373}.lg label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.lg input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}.lg input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.lg input::placeholder{color:#a3a3a3}.lg-h{display:flex;justify-content:space-between;align-items:baseline}.lg-h a{font-size:12.5px;color:#111;text-decoration:underline;text-underline-offset:3px}.lg-w{position:relative}.lg-w input{padding-right:42px!important}.lg-w button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#8a8a8a;cursor:pointer;border-radius:8px}.lg-c{display:flex!important;align-items:center;gap:10px;margin:2px 0 18px!important;font-weight:400!important;cursor:pointer}.lg-c input{position:absolute;opacity:0}.lg-c span{width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.lg-c input:checked+span{background:#111;border-color:#111}.lg-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.lg-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}.lg-f{margin:16px 0 0;text-align:center;font-size:13px;color:#737373}.lg-f a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px}

const i=document.getElementById('lg2'),b=document.getElementById('lge');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.setAttribute('aria-label',s?'Hide password':'Show password')});document.getElementById('lgf').addEventListener('submit',e=>e.preventDefault());document.querySelectorAll('.lg a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));