A darkmode toggle using tailwindcss

tailwind-darkmode-toggle.html

<div class="w-14 h-8">
  <input type="checkbox" id="dark-mode-toggle" class="hidden" onchange="document.documentElement.classList.toggle('dark')" />
  <label for="dark-mode-toggle" class="w-full h-full bg-gray-800 dark:bg-white rounded-full p-1 flex justify-between cursor-pointer">
    <span class="inline dark:hidden">🌞</span>
    <span class="w-6 h-6 rounded-full bg-white dark:bg-gray-800 block float-right dark:float-left"></span>
    <span class="hidden dark:inline">🌛</span>
  </label>
</div>