Countdown

With Seconds

Add only seconds countdown using .countdown-1 class.

  • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-1 sm:gap-1">
        <li>
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 
</div>

With Minutes

Set minutes countdown style using .countdown-1 class.

  • Min
  • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-1 sm:gap-1">
        <li">
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li">
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 
</div>

With Hours

Add hours countdown using .countdown class.

  • Hours
  • Min
  • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown sm:gap-1">
        <li class="dark:bg-sidebar-dark">
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 
</div>

Countdown Styles

Set the countdown using .countdown and .countdown-1 class.

  • Days
  • Hours
  • Min
  • Sec
  • Days
  • Hours
  • Min
  • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <!-- Countdown style start -->
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown sm:gap-1">
        <li class="dark:bg-sidebar-dark">
          <span class="days time-value"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 

   <!-- Countdown-1 style start -->
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-1 sm:gap-1">
        <li>
          <span class="days time-value"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li>
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li>
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li>
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 
</div>

Countdown Label Styles

Set countdown style using .countdown-3 and.countdown-4 class.

  • d
  • h
  • m
  • s
  • Days
  • Hours
  • Min
  • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <!-- Countdown-3 style start -->
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-3 sm:gap-1">
        <li>
          <span class="days time-value"></span>
          <span class="timer-label"> d </span>
        </li>
        <li>
          <span class="hour time-value"></span>
          <span class="timer-label"> h </span>
        </li>
        <li>
          <span class="minutes time-value"></span>
          <span class="timer-label"> m </span>
        </li>
        <li>
          <span class="seconds time-value"></span>
          <span class="timer-label"> s </span>
        </li>
      </ul>  
   </div> 
 
   <!-- Countdown-4 style start -->
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-4 sm:gap-1">
        <li>
          <span class="days time-value"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li>
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li>
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li>
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div> 
</div>

Background Countdown

Add countdown with background using .countdown-5 and .countdown-6 class.

  • Days
  • Hours
  • Min
  • Sec
  • Days
  • Hours
  • Min
  • Sec 
<div class="flex flex-wrap items-center justify-center gap-2">
   <!-- Countdown-5 style start -->
   <div class="p-4 bg-primary sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-5 sm:gap-1">
        <li>
          <span class="days time-value"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li>
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li>
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li>
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div>
 
   <!-- Countdown-6 style start -->
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-6 sm:gap-1">
        <li class="dark:bg-sidebar-dark">
          <span class="days time-value"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="hour time-value"></span>
          <span class="timer-label"> Hours </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="minutes time-value"></span>
          <span class="timer-label"> Min </span>
        </li>
        <li class="dark:bg-sidebar-dark">
          <span class="seconds time-value"></span>
          <span class="timer-label"> Sec </span>
        </li>
      </ul>  
   </div>
</div>

Countdown Label

Add countdown with label style using .countdown-7 class.

  • Days
    • Hours
    • Min
    • Sec
<div class="flex flex-wrap items-center justify-center gap-2">
   <div class="p-4 bg-gray-light sm:p-2">
      <ul class="flex flex-col items-center justify-center gap-2 timer">
        <li class="flex flex-col items-center justify-center gap-1 font-bold">
          <span class="days time-value text-[1.25rem]"></span>
          <span class="timer-label"> Days </span>
        </li>
        <li>
          <ul class="flex flex-wrap items-center justify-center gap-2 timer countdown-7 sm:gap-1">
            <li>
              <span class="hour time-value"></span>
              <span class="timer-label"> Hours </span>
            </li>
            <li>
              <span class="minutes time-value"></span>
              <span class="timer-label"> Minu </span>
            </li>
            <li>
              <span class="seconds time-value"></span>
              <span class="timer-label"> Sec </span>
            </li>
          </ul> 
        </li>
      </ul> 
   </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode