Skeuomorphic Toggle Switch

<div class="relative p-6 flex items-center justify-center">
  <style>
    .toggle-wrapper{display:flex;justify-content:center;align-items:center;position:relative;border-radius:.5em;padding:.125em;background-image:linear-gradient(to bottom,#d5d5d5,#e8e8e8);box-shadow:0 1px 1px rgba(255,255,255,.6);font-size:1.5em}.toggle-checkbox{appearance:none;position:absolute;z-index:1;border-radius:inherit;width:100%;height:100%;font:inherit;opacity:0;cursor:pointer}.toggle-container{display:flex;align-items:center;position:relative;border-radius:.375em;width:3em;height:1.5em;background-color:#e8e8e8;box-shadow:inset 0 0 .0625em .125em rgba(255,255,255,.2),inset 0 .0625em .125em rgba(0,0,0,.4);transition:background-color .4s linear}.toggle-button{display:flex;justify-content:center;align-items:center;position:absolute;left:.0625em;border-radius:.3125em;width:1.375em;height:1.375em;background-color:#e8e8e8;box-shadow:inset 0 -.0625em .0625em .125em rgba(0,0,0,.1),inset 0 -.125em .0625em rgba(0,0,0,.2),inset 0 .1875em .0625em rgba(255,255,255,.3),0 .125em .125em rgba(0,0,0,.5);transition:left .4s}.toggle-button-circles-container{display:grid;grid-template-columns:repeat(3,min-content);gap:.125em;position:absolute;margin:0 auto}.toggle-button-circle{border-radius:50%;width:.125em;height:.125em;background-image:radial-gradient(circle at 50% 0,#f5f5f5,#c4c4c4)}
  </style>
  <div class="toggle-wrapper relative">
    <input class="toggle-checkbox focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/60 rounded-md" type="checkbox" aria-label="Toggle" aria-pressed="false">
    <div class="toggle-container">
      <div class="toggle-button">
        <div class="toggle-button-circles-container">
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
          <div class="toggle-button-circle"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
    const checkbox = document.querySelector('.toggle-checkbox');const container = document.querySelector('.toggle-container');const button = document.querySelector('.toggle-button');const OFF_BG = '#e8e8e8';const ON_BG = '#3b82f6';const OFF_LEFT = '.0625em';const ON_LEFT = '1.5625em';function applyState() {const checked = checkbox.checked;container.style.backgroundColor = checked ? ON_BG : OFF_BG;button.style.left = checked ? ON_LEFT : OFF_LEFT;checkbox.setAttribute('aria-pressed', checked ? 'true' : 'false');}checkbox.addEventListener('change', applyState);applyState();
  </script>
</div>