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.9k

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

Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

3 months ago

745
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

9 months ago

2.2k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.2k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

15.6k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

3.7k
Our services component

Author:
Anonymous

11 months ago

1.5k
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.5k
Product features list with inner border

Author:
Lîmåã M

2 years ago

13.8k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

1 year ago

3.6k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

26.8k
Responsive Features Section

Author:
ᴀʀ!ᴀ

2 months ago

369

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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