Back to Discover

Tailwind CSS Dark Mode Example

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body x-data="{ darkMode: false }" :class="darkMode ? 'dark' : ''">
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
    <!-- Header -->
    <header class="bg-white dark:bg-gray-800 shadow-sm transition-colors duration-300">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white transition-colors duration-300">
          Dark Mode Demo
        </h1>

        <!-- Dark Mode Toggle -->
        <button 
                @click="darkMode = !darkMode"
                class="relative inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-300"
                >
          <ion-icon 
                    :name="darkMode ? 'moon' : 'sunny'" 
                    class="text-xl text-gray-700 dark:text-yellow-400"
                    ></ion-icon>
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200" x-text="darkMode ? 'Dark' : 'Light'"></span>
        </button>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- Cards Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
          <div class="flex items-center gap-3 mb-4">
            <div class="p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
              <ion-icon name="bulb-outline" class="text-2xl text-blue-600 dark:text-blue-400"></ion-icon>
            </div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Feature One</h2>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
            This is an example card demonstrating dark mode functionality with smooth transitions.
          </p>
        </div>

        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
          <div class="flex items-center gap-3 mb-4">
            <div class="p-3 bg-green-100 dark:bg-green-900 rounded-lg">
              <ion-icon name="leaf-outline" class="text-2xl text-green-600 dark:text-green-400"></ion-icon>
            </div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Feature Two</h2>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
            All colors automatically adapt to the selected theme for optimal readability.
          </p>
        </div>

        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
          <div class="flex items-center gap-3 mb-4">
            <div class="p-3 bg-purple-100 dark:bg-purple-900 rounded-lg">
              <ion-icon name="rocket-outline" class="text-2xl text-purple-600 dark:text-purple-400"></ion-icon>
            </div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Feature Three</h2>
          </div>
          <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
            Professional design that works seamlessly in both light and dark environments.
          </p>
        </div>
      </div>

      <!-- Info Section -->
      <div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 transition-colors duration-300">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">About This Demo</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">
          This example demonstrates a complete dark mode implementation using Tailwind CSS's dark mode utilities, Alpine.js for state management, and Ionicons for beautiful icons.
        </p>
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full">Tailwind CSS</span>
          <span class="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm rounded-full">Alpine.js</span>
          <span class="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-sm rounded-full">Ionicons</span>
        </div>
      </div>
    </main>
  </div>

   tailwind.config = {
            darkMode: 'class'
        }

Comments (0)

No comments yet. Be the first!