Tailwind CSS Dark Mode Card

card.html

<div class="m-10 rounded-lg bg-white px-6 py-8 shadow-xl ring-1 ring-slate-900/5 dark:bg-black">
  <h3 class="text-base font-medium tracking-tight text-slate-900 dark:text-white">Writes Upside-Down</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-blue-100">The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.</p>

 <button
    id="toggleDark"
    class="px-4 py-2 text-sm font-medium mt-8 text-blue-900 bg-blue-100 rounded-md"
    onclick="document.body.classList.toggle('dark')"
  >Toggle Dark Mode</button>
</div>

// To showcase the demo of dark theme. Copy paste :)
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", () => {
    const toggleDark = document.getElementById('toggleDark')
    toggleDark.addEventListener('click', function() {
      if(document.documentElement.classList.includes('dark')) {
        document.documentElement.classList.remove('dark')
      }
      else {
        document.documentElement.classList.add('dark')
      }
      alert("click!")
    });
  });
</script>