Home
Michael Andreuzza
countdown with Tailwind CSS and Alpinejs

countdown with Tailwind CSS and Alpinejs

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

Feature showcase Countdown Timer

Author Michael Andreuzza

2.3k

8

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="bg-white relative overflow-hidden">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center  py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
   <div>
    <h1>Countdown</h1>
    <p class="text-balance">
     A countdown to a specific date. The countdown will update every
     second.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
   
   <div class="w-full justify-center border p-12 rounded-xl" x-data="{
  endDate: new Date('2024-12-31T23:59:59').getTime(),
  remainingTime: 0,
  formatTime(time) {
    const days = Math.floor(time / (1000 * 60 * 60 * 24));
    const hours = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((time % (1000 * 60)) / 1000);
    return { days, hours, minutes, seconds };
  }
}" x-init="() => {
  setInterval(() => {
    const now = new Date().getTime();
    const remainingTime = endDate - now;
    $data.remainingTime = remainingTime > 0 ? remainingTime : 0;
  }, 1000);
}"> <template x-if="remainingTime > 0">
     <div class="gap-4 text-center w-full flex mx-auto justify-between">
      <div w-full="">
       <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).days"></div>
       <div class="text-sm text-orange-500">Days</div>
      </div>
      <div w-full="">
       <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).hours"></div>
       <div class="text-sm text-orange-500">Hours</div>
      </div>
      <div w-full="">
       <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).minutes"></div>
       <div class="text-sm text-orange-500">Minutes</div>
      </div>
      <div w-full="">
       <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).seconds"></div>
       <div class="text-sm text-orange-500">Seconds</div>
      </div>
     </div>
    </template>
    <div class="gap-4 text-center w-full flex mx-auto justify-between">
     <div w-full="">
      <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).days">248</div>
      <div class="text-sm text-orange-500">Days</div>
     </div>
     <div w-full="">
      <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).hours">14</div>
      <div class="text-sm text-orange-500">Hours</div>
     </div>
     <div w-full="">
      <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).minutes">58</div>
      <div class="text-sm text-orange-500">Minutes</div>
     </div>
     <div w-full="">
      <div class="text-3xl font-medium text-gray-500" x-text="formatTime(remainingTime).seconds">35</div>
      <div class="text-sm text-orange-500">Seconds</div>
     </div>
    </div> <template x-if="remainingTime <= 0">
     <div class="text-center">
      <div class="text-xl font-bold">Countdown has ended!</div>
     </div>
    </template>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        ow to create a countdown with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-countdown-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/count-down/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Facts
A simple facts overview

Author:
Matti

1 year ago

1.7k
Key Features
Showcase Key Features of your app

Author:
Anonymous

1 year ago

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

Author:
Akram Khan

1 year ago

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

Author:
Mike Varen

1 year ago

4.3k
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

3 years ago

52.1k
Responsive Features Section

Author:
ariaw

9 months ago

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

Author:
Ayyamperumal S

2 weeks ago

164
Features grid with icon

Author:
Freja Jensen

2 years ago

11.2k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

6 months ago

435
Features

Author:
Matti

1 year ago

1.1k
counter compteur
counter compteur

Author:
Omer fils ELENGA

2 months ago

166

Explore components by Tags

Didn't find component you were looking for?

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12