Dark mode with Tailwind CSS and alpinjs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. 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

Tailwind v3.4 4k 9

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

Feature cards

Fagundo67

3 years ago

11.5k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Feature section - Htmlwind
Three columns with icons

Htmlwind

1 year ago

1.2k
Facts
A simple facts overview

Matti

1 year ago

2.5k
Showcase
A version of an showcase.

Matti

1 year ago

1.9k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

251
Feature display cards (grid layout)

Ronald Otieno

2 years ago

3.6k
tailwind services section
display features/services of your product

L.J. Weber

3 years ago

21.5k
countdown with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

971
accordion with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.9k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.