Skeuomorphic Toggle Switch with Blue Active State

<div class="group relative hover:ring-1 ring-white/10 rounded-full bg-gradient-to-b from-gray-100 to-gray-200 p-2.5 shadow-md flex items-center justify-center">
  <input class="toggle-checkbox peer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/60 rounded-md absolute z-10 w-full h-full opacity-0 cursor-pointer" type="checkbox" aria-label="Toggle" role="switch" aria-checked="false" style="appearance:none; border-radius:inherit; font:inherit;">
  <div class="toggle-container transition-colors duration-400 flex items-center relative rounded-full w-20 h-10 bg-gray-200 shadow-inner" style="box-shadow:inset 0 0 2px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.1);">
    <div class="toggle-button absolute left-0.5 rounded-full w-9 h-9 bg-gray-200 flex items-center justify-center transition-all duration-400" style="box-shadow:inset 0 -2px 2px rgba(0,0,0,0.1), inset 0 -4px 2px rgba(0,0,0,0.2), inset 0 6px 2px rgba(255,255,255,0.3), 0 4px 4px rgba(0,0,0,0.5);">
      <div class="toggle-button-circles-container absolute grid grid-cols-3 gap-0.5" style="grid-template-columns:repeat(3, 4px);">
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
        <div class="toggle-button-circle rounded-full w-0.5 h-0.5 bg-gradient-radial from-gray-50 to-gray-400"></div>
      </div>
    </div>
  </div>
  <style>.toggle-button-circle{background-image:radial-gradient(circle at 50% 0,#f5f5f5,#c4c4c4);}</style>
  <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='2px';const ON_LEFT='42px';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-checked',checked?'true':'false');}checkbox.addEventListener('change',applyState);applyState();
  </script>
</div>