Countdown Counter

                    <section class="p-6 max-w-md mx-auto">
  <div class="bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 rounded-2xl shadow-xl p-8 text-black overflow-hidden relative">
    <div class="absolute -top-12 -right-12 w-40 h-40 bg-white bg-opacity-10 rounded-full blur-xl"></div>
    <div class="absolute -bottom-12 -left-12 w-40 h-40 bg-white bg-opacity-5 rounded-full blur-xl"></div>
    
    <h3 class="text-2xl font-bold mb-6 text-center text-white relative z-10">Flash Sale Ends In</h3>
    
    <div class="flex justify-center items-center space-x-6 relative z-10">
      <div class="flex flex-col items-center">
        <div class="bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 w-20 h-20 flex items-center justify-center border border-white border-opacity-20 shadow-lg">
          <span id="counter-hours" class="text-4xl font-bold tabular-nums transition-all duration-300">12</span>
        </div>
        <span class="text-xs mt-3 text-white font-medium tracking-wider uppercase">HOURS</span>
      </div>
      
      <div class="text-3xl font-light text-white opacity-75">:</div>
      
      <div class="flex flex-col items-center">
        <div class="bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 w-20 h-20 flex items-center justify-center border border-white border-opacity-20 shadow-lg">
          <span id="counter-minutes" class="text-4xl font-bold tabular-nums transition-all duration-300">34</span>
        </div>
        <span class="text-xs mt-3 text-white font-medium tracking-wider uppercase">MINUTES</span>
      </div>
      
      <div class="text-3xl font-light text-white opacity-75">:</div>
      
      <div class="flex flex-col items-center">
        <div class="bg-white bg-opacity-15 backdrop-blur-md rounded-xl p-4 w-20 h-20 flex items-center justify-center border border-white border-opacity-20 shadow-lg overflow-hidden relative">
          <div id="pulse-effect" class="absolute inset-0 bg-white opacity-0"></div>
          <span id="counter-seconds" class="text-4xl font-bold tabular-nums transition-all duration-300 relative z-10">56</span>
        </div>
        <span class="text-xs mt-3 text-white font-medium tracking-wider uppercase">SECONDS</span>
      </div>
    </div>
  </div>

  <style>
    @keyframes pulse {
      0% { opacity: 0; }
      50% { opacity: 0.3; }
      100% { opacity: 0; }
    }
    
    .pulse-animation {
      animation: pulse 1s ease-in-out;
    }
  </style>

  <script>
    function getTimeRemaining(endtime) {
      const total = Date.parse(endtime) - Date.now();
      const seconds = Math.floor((total / 1000) % 60);
      const minutes = Math.floor((total / 1000 / 60) % 60);
      const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
      const days = Math.floor(total / (1000 * 60 * 60 * 24));

      return {
        total,
        days,
        hours,
        minutes,
        seconds
      };
    }

    function formatNumber(num) {
      return num < 10 ? `0${num}` : num;
    }

    function initCounterCountdown(endtime) {
      const hoursElement = document.getElementById('counter-hours');
      const minutesElement = document.getElementById('counter-minutes');
      const secondsElement = document.getElementById('counter-seconds');
      
      function updateClock() {
        const t = getTimeRemaining(endtime);
        
        if (hoursElement) hoursElement.textContent = formatNumber(t.hours);
        if (minutesElement) minutesElement.textContent = formatNumber(t.minutes);
        if (secondsElement) secondsElement.textContent = formatNumber(t.seconds);
        
        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }
      
      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
      return timeinterval;
    }
    
    const deadline = new Date();
    deadline.setHours(deadline.getHours() + 12);
    
    let lastSeconds = -1;
    
    function addTransitionEffect() {
      const secondsElement = document.getElementById('counter-seconds');
      const pulseEffect = document.getElementById('pulse-effect');
      const t = getTimeRemaining(deadline);
      
      if (t.seconds !== lastSeconds && secondsElement && pulseEffect) {
        pulseEffect.classList.remove('pulse-animation');
        void pulseEffect.offsetWidth;
        pulseEffect.classList.add('pulse-animation');
        
        secondsElement.classList.add('scale-110');
        setTimeout(() => {
          secondsElement.classList.remove('scale-110');
        }, 300);
        
        lastSeconds = t.seconds;
      }
    }
    
    setInterval(addTransitionEffect, 1000);
    
    initCounterCountdown(deadline);
  </script>
</section>