Dark Mode Example

<!doctype html>
<title>Tailwind CSS Dark Mode Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: 'class',
  }
</script>
<body class="p-8 flex items-center justify-center min-h-screen transition-colors duration-500">

<div id="container" class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl w-full max-w-md transition-colors duration-500">
    <div>
      <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
        </svg>
      </span>
    </div>
    <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight whitespace-nowrap transition-colors duration-500">Writes Upside-Down</h3>
    <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm transition-colors duration-500">
      The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
    </p>
    
    <div class="mt-6">
      <button onclick="document.documentElement.classList.toggle('dark')" class="w-full py-2 px-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded font-medium transition-colors duration-500">
        Toggle Dark Mode
      </button>
    </div>
  </div>

</body>