Dexo - Premium Admin Template

Countdown

With Seconds

You can add only seconds countdown using countdown-1 class.

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

With minutes

You can add minutes countdown style using countdown-1 class.

  <div class="flex flex-wrap gap-2 justify-center items-center">
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-1 flex flex-wrap gap-2 justify-center items-center 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

You can add hours countdown using countdown class.

Hours
Min
Sec

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

Countdown Styles

You can add countdown using countdown or countdown-1 class.

Days
Hours
Min
Sec

Days
Hours
Min
Sec

  <div class="flex flex-wrap gap-2 justify-center items-center">
   <!-- Countdown style start -->
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown flex flex-wrap gap-2 justify-center items-center 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-1 style start -->
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-1 flex flex-wrap gap-2 justify-center items-center 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

You can add countdown style using countdown-3 or countdown-4 class.

Days
Hours
Min
Sec

  <div class="flex flex-wrap gap-2 justify-center items-center">
   <!-- Countdown-3 style start -->
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-3 flex flex-wrap gap-2 justify-center items-center 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="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-4 flex flex-wrap gap-2 justify-center items-center 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

You can add countdown with background using countdown-5 or countdown-6 class.

Days
Hours
Min
Sec

Days
Hours
Min
Sec

  <div class="flex flex-wrap gap-2 justify-center items-center">
   <!-- Countdown-5 style start -->
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-5 flex flex-wrap gap-2 justify-center items-center 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="bg-gray-light p-4 sm:p-2">
      <ul class="timer countdown-6 flex flex-wrap gap-2 justify-center items-center 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

You can add countdown style using countdown-7 class.

Days
- Hours
- Min
- Sec

  <div class="flex flex-wrap gap-2 justify-center items-center">
   <div class="bg-gray-light p-4 sm:p-2">
      <ul class="timer flex flex-col gap-2 justify-center items-center">
        <li class="flex flex-col gap-1 justify-center items-center font-bold">
          <span class="days time-value text-[40px]"></span>
          <span class="timer-label"> Days </span>
        </li>
        <ul class="timer countdown-7 flex flex-wrap gap-2 justify-center items-center 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> 
      </ul> 
   </div> 
</div>

Hand crafted & made with

Countdown

With Seconds

With minutes

With Hours

Countdown Styles

Countdown Label Styles

Background Countdown

Countdown Label

Template Mode

Layout Type

Sidebar Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Notification

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items (25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Add Total

Helen Walter

Countdown

With Seconds

With minutes

With Hours

Countdown Styles

Countdown Label Styles

Background Countdown

Countdown Label

Template Mode

Layout Type

Sidebar Type