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

1.6k

4

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

beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

5 months ago

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

Author:
Mike Varen

7 months ago

1.5k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

7 months ago

1.7k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

11 months ago

3.8k
Basic features section
Display your most important features

Author:
Dipti narayan

1 year ago

5.6k
Tailwind css feature cards

Author:
Kofi Osei

1 year ago

10k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

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

Author:
Anonymous

11 months ago

2.9k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

6 months ago

1.4k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

6 months ago

841
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

10 months ago

2.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

44.5k

Explore components by Tags

Didn't find component you were looking for?

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9