JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>CountDown Timer</title>
</head>
<body>
    <h1>Happy birthday!</h1>
    <div class="countdown-container">
        <div class="countdown-el days-c">
            <p class="big-text" id="days">0</p>
            <span>days</span>
        </div>
        <div class="countdown-el hours-c">
            <p class="big-text" id="hours">0</p>
            <span>hours</span>
        </div>
        <div class="countdown-el mins-c">
            <p class="big-text" id="mins">0</p>
            <span>minutes</span>
        </div>
        <div class="countdown-el sec-c">
            <p class="big-text" id="sec">0</p>
            <span>seconds</span>
        </div>

    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body {
    background-image: url(https://get.wallhere.com/photo/3072x1728-px-anime-anime-girls-Kyoukai-no-Kanata-Nase-Mitsuki-1246395.jpg);
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    font-family: 'Poppins', sans-serif;
}

.countdown-container {
    display: flex;
}

h1 {
    font-weight: normal;
    font-size: 4rem;
    margin-top: 6rem;
    font-weight: bold;
}

.big-text {
    font-weight: bold;
    font-size: 6rem;
    line-height: 1;
    margin: 0 2rem
}

.countdown-el {
    text-align: center;
}

.countdown-el span {
    font-size: 1.5rem;

}

.link {
    margin-top: 2rem;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    color: rgb(85, 85, 85);
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 15px;
    transition: .2s linear;
}

.link:active {
    background-color: rgb(85, 85, 85);
    color: #fff;
}

/* Adaption */

@media screen and (max-width: 767px) {
    .countdown-container {
        display: flex;
        flex-direction: column;
        margin-top: 35px;
    }

    .big-text {
        margin: 0 0.5rem
    }

    .link {
        margin-top: 2rem;
    }

    h1 {
        text-align: center;
    }
}

JavaScript

const newYears = '28 Feb 2022'; // Время до нового года

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('mins');
const secondsEl = document.getElementById('sec');

function countdown() {
    const newYearsDate = new Date(newYears);
    const currentDate = new Date();

    const totalSeconds = (newYearsDate - currentDate) / 1000;

    const days = Math.floor(totalSeconds / 3600 / 24);
    const hours = Math.floor(totalSeconds / 3600) % 24;
    const minutes = Math.floor(totalSeconds / 60) % 60;
    const seconds = Math.floor(totalSeconds) % 60;

    daysEl.innerHTML = days;
    hoursEl.innerHTML = hours;
    minutesEl.innerHTML = minutes;
    secondsEl.innerHTML = seconds;
}

// Initial call
countdown();

setInterval(countdown, 1000);