Home
Michael Andreuzza
Dark mode with Tailwind CSS and alpinjs

Dark mode with Tailwind CSS and alpinjs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us,Roadmap, Changelog

Feature showcase Timeline

Author Michael Andreuzza

2.3k

5

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section x-data="{ darkMode: false }">
 <div :class="{ 'dark': darkMode }" class="bg-white dark:bg-gray-800 transition-colors duration-500">
  <div class="w-full mx-auto 2xl:max-w-7xl items-center flex flex-col lg:h-svh justify-center py-24 lg:py-96 relative p-8">
   <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto">
    <div>
     <h1>Dark mode toggle</h1>
     <p class="text-balance">
      Test the dark mode toggle by clicking on the button below.
     </p>
    </div>
   </div>
   <div class="mt-6 border-t pt-12">
    
    
    <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border">
     
     <div class="mx-auto grid grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:grid-cols-4">
      <div> <time datetime="August 2021" class="flex items-center text-sm font-semibold leading-6 text-orange-600 dark:text-orange-400"> <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
         <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
        </svg> Aug 2021 <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 dark:bg-gray-500 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div> </time>
       <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white"> Company Inception </p>
       <p class="mt-1 text-sm text-pretty leading-7 text-gray-500 dark:text-gray-300"> The company was born out of a vision to innovate. </p>
      </div>
      <div> <time datetime="December 2021" class="flex items-center text-sm font-semibold leading-6 text-orange-600 dark:text-orange-400"> <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
         <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
        </svg> Dec 2021 <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 dark:bg-gray-500 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div> </time>
       <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white"> Achieved $65 Million Funding </p>
       <p class="mt-1 text-sm text-pretty leading-7 text-gray-500 dark:text-gray-300"> In an affirmation of our potential and promise, we secured a substantial funding of $65 million. </p>
      </div>
      <div> <time datetime="February 2022" class="flex items-center text-sm font-semibold leading-6 text-orange-600 dark:text-orange-400"> <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
         <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
        </svg> Feb 2022 <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 dark:bg-gray-500 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div> </time>
       <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white"> Beta Version Launch </p>
       <p class="mt-1 text-sm text-pretty leading-7 text-gray-500 dark:text-gray-300"> Marking a significant step forward, we released the beta version of our product. </p>
      </div>
      <div> <time datetime="December 2022" class="flex items-center text-sm font-semibold leading-6 text-orange-600 dark:text-orange-400"> <svg viewBox="0 0 4 4" class="mr-4 h-1 w-1 flex-none" aria-hidden="true">
         <circle cx="2" cy="2" r="2" fill="currentColor"></circle>
        </svg> Dec 2022 <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 dark:bg-gray-500 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div> </time>
       <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white"> Product's Global Rollout </p>
       <p class="mt-1 text-sm text-pretty leading-7 text-gray-500 dark:text-gray-300"> The culmination of our efforts and dedication led to the global launch of our product. </p>
      </div>
     </div>
    </div> 
    <div class="mt-8 mx-auto w-full max-w-sm"> <button @click="darkMode = !darkMode" class="inline-flex items-center gap-x-2 rounded-full bg-orange-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 w-full"> <span x-show="!darkMode" class="flex items-center justify-between gap-3 w-full transition-colors duration-500">
       Toggle Dark Mode
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path>
       </svg> </span> <span x-show="darkMode" class="flex items-center gap-3 justify-between w-full transition-colors duration-500" style="display: none;">
       Toggle Light Mode
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"></path>
       </svg> </span> </button> </div> 
   </div>
  </div>
 </div>
</section>

Related Examples

Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

11 months ago

2.7k
Product feature showccase section with images

Author:
R.P Ketan

1 year ago

15.4k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

11 months ago

1.8k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.6k
Product feature section
Showcase product features with an image

Author:
Anonymous

1 year ago

12.6k
Timeline
timeline with journey

Author:
Abhiraj

3 months ago

476
Showcase
A version of an showcase.

Author:
Matti

4 months ago

728
Feature showcase with images

Author:
Amit Pachange

2 years ago

13k
Responsive Features Section

Author:
ᴀʀ!ᴀ

2 weeks ago

93
Features list with icons on top

Author:
Lina Lindström

2 years ago

9.1k
Features grid

Author:
Sophia Baker

2 years ago

9.2k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1