Setting Row Switch

<label class='sw'><span class='sw-t'><b>Email notifications</b><small>Receive product updates and release notes.</small></span><input type='checkbox' role='switch' checked><span class='sw-k'></span></label>

.sw{display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;cursor:pointer}.sw-t b{display:block;font-size:14px;font-weight:500}.sw-t small{display:block;margin-top:3px;font-size:12.5px;color:#737373}.sw input{position:absolute;opacity:0;pointer-events:none}.sw-k{flex:none;position:relative;width:40px;height:24px;border-radius:99px;background:#d4d4d4;transition:background .2s}.sw-k:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.3,.5,1)}.sw input:checked~.sw-k{background:#171717}.sw input:checked~.sw-k:after{transform:translateX(16px)}.sw input:focus-visible~.sw-k{box-shadow:0 0 0 3px rgba(17,17,17,.2)}