JSFiddle - React, Tailwind, and code Playground

jQuery Countdown Timer

by Jennifer Perrin

HTML

<div id="countdown"></div>
<p id="note"></p>

CSS

body { margin: 20px; }

.countdownHolder{
    width:450px;
    margin:0 auto;
    font: 40px/1.5 'Open Sans Condensed',sans-serif;
    text-align:center;
    letter-spacing:-3px;
}

.position{
    display: inline-block;
    height: 1.6em;
    overflow: hidden;
    position: relative;
    width: 1.05em;
}

.digit{
    position:absolute;
    display:block;
    width:1em;
    background-color:#444;
    border-radius:0.2em;
    text-align:center;
    color:#fff;
    letter-spacing:-1px;
}

.digit.static{
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
    
    background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, #3A3A3A),
        color-stop(0.5, #444444)
    );
}

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}


.countDiv{
    display:inline-block;
    width:16px;
    height:1.6em;
    position:relative;
}

.countDiv:before,
.countDiv:after{
    position:absolute;
    width:5px;
    height:5px;
    background-color:#444;
    border-radius:50%;
    left:50%;
    margin-left:-3px;
    top:0.5em;
    box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
    content:'';
}

.countDiv:after{
    top:0.9em;
}

JavaScript

/**
 * @name        jQuery Countdown Plugin
 * @author        Martin Angelov
 * @version     1.0
 * @url            http://tutorialzine.com/2011/12/countdown-jquery/
 * @license        MIT License
 */

(function($) {

    // Number of seconds in every time division
    var days = 24 * 60 * 60,
        hours = 60 * 60,
        minutes = 60;

    // Creating the plugin
    $.fn.countdown = function(prop) {

        var options = $.extend({
            callback: function() {},
            timestamp: 0
        }, prop);

        var left, d, h, m, s, positions;

        // Initialize the plugin
        init(this, options);

        positions = this.find('.position');

        (function tick() {

            // Time left
            left = Math.floor((options.timestamp - (new Date())) / 1000);

            if (left < 0) {
                left = 0;
            }

            // Number of days left
            d = Math.floor(left / days);
            updateDuo(0, 1, d);
            left -= d * days;

            // Number of hours left
            h = Math.floor(left / hours);
            updateDuo(2, 3, h);
            left -= h * hours;

            // Number of minutes left
            m = Math.floor(left / minutes);
            updateDuo(4, 5, m);
            left -= m * minutes;

            // Number of seconds left
            s = left;
            updateDuo(6, 7, s);

            // Calling an optional user supplied callback
            options.callback(d, h, m, s);

            // Scheduling another call of this function in 1s
            setTimeout(tick, 1000);
        })();

        // This function updates two digit positions at once


        function updateDuo(minor, major, value) {
            switchDigit(positions.eq(minor), Math.floor(value / 10) % 10);
            switchDigit(positions.eq(major), value % 10);
        }

        return this;
    };


    function init(elem, options) {
        elem.addClass('countdownHolder');

        // Creating the...