Countdown Timer Section Generator

<section class="countdown-section">
  <div class="countdown-container">
    <h2 class="countdown-title">Coming Soon</h2>
    <p class="countdown-subtitle">Our new product launches in</p>
    <div class="countdown-timer ">
      <div class="countdown-digit">
        <div class="digit-value" data-days>00</div>
        <div class="digit-label">Days</div>
      </div>
      <span class="separator">:</span>
      <div class="countdown-digit">
        <div class="digit-value" data-hours>00</div>
        <div class="digit-label">Hours</div>
      </div>
      <span class="separator">:</span>
      <div class="countdown-digit">
        <div class="digit-value" data-minutes>00</div>
        <div class="digit-label">Minutes</div>
      </div>
      <span class="separator">:</span>
      <div class="countdown-digit">
        <div class="digit-value" data-seconds>00</div>
        <div class="digit-label">Seconds</div>
      </div>
    </div>
    <div class="countdown-expired" style="display: none;">
      <p>Event has started!</p>
    </div>
    <a href="#" class="countdown-cta">Notify Me</a>
  </div>
</section>

.countdown-section {
  background: #1e293b;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown-container {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 60px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
}

.countdown-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.countdown-subtitle {
  color: #cbd5e1;
  font-size: 1.125rem;
  margin: 0 0 30px 0;
}

.countdown-timer {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.countdown-digit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.digit-value {
  background: #334155;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 100px;
  font-size: 3rem;
}

.digit-label {
  color: #94a3b8;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.separator {
  color: #6366f1;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.countdown-expired {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
}

.countdown-cta {
  background: #6366f1;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 30px;
  transition: all 0.2s ease;
}

.countdown-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

// Countdown Timer JavaScript
const targetDate = new Date('2026-01-15T18:20').getTime();

function updateCountdown() {
  const now = new Date().getTime();
  const diff = targetDate - now;

  if (diff <= 0) {
    document.querySelector('.countdown-timer').style.display = 'none';
    document.querySelector('.countdown-expired').style.display = 'block';
    return;
  }

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  document.querySelector('[data-days]').textContent = String(days).padStart(2, '0');
  document.querySelector('[data-hours]').textContent = String(hours).padStart(2, '0');
  document.querySelector('[data-minutes]').textContent = String(minutes).padStart(2, '0');
  document.querySelector('[data-seconds]').textContent = String(seconds).padStart(2, '0');
}

// Update every second
updateCountdown();
setInterval(updateCountdown, 1000);

import { useState, useEffect } from 'react';

const CountdownSection = ({ targetDate = '2026-01-15T18:20' }) => {
  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
  const [expired, setExpired] = useState(false);

  useEffect(() => {
    const target = new Date(targetDate).getTime();

    const timer = setInterval(() => {
      const now = new Date().getTime();
      const diff = target - now;

      if (diff <= 0) {
        setExpired(true);
        clearInterval(timer);
        return;
      }

      setTimeLeft({
        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((diff % (1000 * 60)) / 1000),
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [targetDate]);

  const containerStyle = {
    background: '#1e293b',
    padding: '60px 20px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  const digitStyle = {
    background: '#334155',
    color: '#ffffff',
    borderRadius: 8,
    width: 90,
    height: 100,
    fontSize: '3rem',
    fontWeight: 700,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };

  if (expired) {
    return (
      <section style={containerStyle}>
        <div style={{ textAlign: 'center' }}>
          <p style={{ color: '#ffffff', fontSize: '1.5rem' }}>Event has started!</p>
        </div>
      </section>
    );
  }

  const TimeUnit = ({ value, label }) => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={digitStyle}>{String(value).padStart(2, '0')}</div>
      <div style={{ color: '#94a3b8', fontSize: '0.875rem', marginTop: 8 }}>{label}</div>
    </div>
  );

  return (
    <section style={containerStyle}>
      <div style={{ textAlign: 'center', maxWidth: 800 }}>
        <h2 style={{ color: '#ffffff', fontSize: '2.5rem', margin: '0 0 10px' }}>Coming Soon</h2>
        <p style={{ color: '#cbd5e1', margin: '0 0 30px' }}>Our new product launches in</p>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          {[{ value: timeLeft.days, label: 'Days' }, { value: timeLeft.hours, label: 'Hours' }, { value: timeLeft.minutes, label: 'Minutes' }, { value: timeLeft.seconds, label: 'Seconds' }].map((unit, i) => (
            <React.Fragment key={i}>
              <TimeUnit value={unit.value} label={unit.label} />
              {i < 3 && <span style={{ color: '#6366f1', fontSize: '2rem', fontWeight: 700, marginBottom: 24 }}>:</span>}
            </React.Fragment>
          ))}
        </div>
        <a
          href="#"
          style={{
            display: 'inline-block',
            marginTop: 30,
            padding: '14px 32px',
            background: '#6366f1',
            color: '#ffffff',
            border: 'none',
            borderRadius: 8,
            textDecoration: 'none',
            fontWeight: 600,
          }}
        >
          Notify Me
        </a>
      </div>
    </section>
  );
};

export default CountdownSection;

// Usage:
// <CountdownSection targetDate="2025-12-31T23:59:59" />