Dark Premium Toggle Switch

<div class="group relative hover:ring-1 ring-white/10 rounded-[25px] bg-gradient-to-b from-neutral-800 to-neutral-900" style="display:flex;justify-content:center;align-items:center;position:relative;border-radius:25px;padding:5px;background-image:linear-gradient(to bottom,#1a1a1a,#0f0f0f);box-shadow:0 5px 15px rgba(0,0,0,0.7), inset 0 0.5px 0 rgba(255,255,255,0.05);font-size:0.75em;">
  <input class="toggle-checkbox peer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/60 rounded-md" type="checkbox" aria-label="Toggle" role="switch" aria-checked="false" style="appearance:none;position:absolute;z-index:1;border-radius:inherit;width:100%;height:100%;font:inherit;opacity:0;cursor:pointer;">
  <div class="toggle-container transition-colors bg-neutral-800" style="display:flex;align-items:center;position:relative;border-radius:25px;width:40px;height:20px;background-color:#171717;box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.08),inset 0 1px 4px rgba(0,0,0,0.8),inset 0 -0.5px 1px rgba(255,255,255,0.03);transition:all .4s ease;">
    <div class="toggle-button bg-gradient-to-br from-neutral-700 to-neutral-800" style="display:flex;justify-content:center;align-items:center;position:absolute;left:1px;border-radius:50%;width:18px;height:18px;background:linear-gradient(145deg, #262626, #1c1c1c);box-shadow:inset 0 0.5px 1px rgba(255,255,255,0.1),inset 0 -1px 2px rgba(0,0,0,0.4),0 0 0 0.5px rgba(255,255,255,0.08),0 2px 6px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.3);transition:all .4s ease;">
      <div class="toggle-button-circles-container" style="display:grid;grid-template-columns:repeat(3, 1.5px);gap:1.25px;position:absolute;margin:0 auto;">
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
        <div class="toggle-button-circle bg-gradient-to-br from-neutral-500 to-neutral-600" style="border-radius:50%;width:1.25px;height:1.25px;background:linear-gradient(135deg, #525252, #404040);box-shadow:inset 0 0.25px 0.5px rgba(255,255,255,0.15),inset 0 -0.25px 0.5px rgba(0,0,0,0.4);"></div>
      </div>
    </div>
  </div>
  <script>
  document.addEventListener('DOMContentLoaded', function () {const checkbox = document.querySelector('.toggle-checkbox');const container = document.querySelector('.toggle-container');const button = document.querySelector('.toggle-button');const OFF_BG = '#171717';const ON_BG = '#2563eb';const OFF_LEFT = '1px';const ON_LEFT = '21px';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>