JSFiddle - React, Tailwind, and code Playground

Its Yet Another jQuery Powered Countdown

by Jennifer Perrin

HTML

<link rel='stylesheet' type='text/css' media='all' href='http://fonts.googleapis.com/css?family=Droid+Sans' />
<link rel='stylesheet' type='text/css' media='all' href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' />

<div class="demo-container">
    <div id="container">
        <h1>Its Yet Another jQuery Powered Countdown</h1>
        <p>oh My!</p>
            
        <div id="countdownCont">
            
            <div class="time weeks_time" style="display: none;">
                <span class="number">0</span>
                <span class="number">2</span>
                <span class="time_title">weeks</span>
            </div>

            <div class="time days_time">
                <span class="number">0</span>
                <span class="number">3</span>
                <span class="time_title">days</span>
            </div>

            <div class="time hours_time">
                <span class="number">1</span>
                <span class="number">7</span>
                <span class="time_title">hours</span>
            </div>

            <div class="time minutes_time">
                <span class="number">3</span>
                <span class="number">5</span>
                <span class="time_title">minutes</span>
            </div>

            <div class="time seconds_time">
                <span class="number">5</span>
                <span class="number">5</span>
                <span class="time_title">seconds</span>
            </div>
            
        </div>
        
        <div class="info_message" id="complete_info_message" style="display: none;">
            <p>Countdown complete!</p>
        </div>

    </div>
</div>

<div class="demo-container">
    <p class="footer">Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.</p>
</div>

CSS

/*-------------------------
    General Styles
--------------------------*/
body {
    font-family: 'Yanone Kaffeesatz';
    color: #efefef;
    margin: 20px;
    background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
}

p { 
    margin:10px 0; 
    font-size: 16px; 
    font-family: 'Droid Sans';
    text-align: center;
}

h1 {
    display: block;
    margin: 0 0 20px 0;
    font-size: 48px;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.2);
    text-align: center;
}
    h1:hover { color: rgba(255,255,255,0.3); }

a {
    border-bottom: 1px dotted #5a7cb1;
    color: #f27011;
    padding: 0 1px;
    text-decoration: none;
}
    a:hover {
        background-color: rgba(255,255,255,0.2);
        border-bottom: 1px dotted #444;
        color: #5a7cb1;
    }

.demo-container { width: 780px;     margin: 0 Auto; }
.demo-container .footer { font-size: 14px; }

/*----------------------------
    jQuery Countdown oh My!
-----------------------------*/
#container {
    margin: 20px auto;
    width: 780px;
    color: #eee;
}

#countdownCont {
    width: 580px;
    height: 96px;
    margin: 20px auto;
}

.time {
    width: 100px;
    height: 96px;
    float: left;
    margin-left: 2px;
    padding-left: 13px;
    position: relative;
    color: #5a7cb1;
}

.time_title { clear: left; width: 100px; text-align: center; }

.time .number {
    font: bold 60px 'Droid Sans';
    float: left;
    width: 50px;
    text-align: center;
    position: relative;
}

.info_message {
    background-color: #111;
    border: 2px solid #444;
    margin: 10px auto auto;
    padding: 5px;
    text-align: center;
    width: 200px;
    color: #fff;
}

JavaScript

/**    =============================================================================================
 *    Countdown : jQuery Powered count down script
 *    v1.0
 *
 *    Demo and Documentation:
 *    http://jenniferperrin.com/blog/
 *    =============================================================================================
 *
 *    Author: Jennifer Perrin (http://www.jenniferperrin.com)
 *    Date: 2012-12-17
 *
 *    Copyright 2012, Jennifer Perrin
 *    Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0)
 *
 *    ============================================================================================= **/
 
 (function($) {

    $.fn.countDown = function(options) {
        config = {};
        $.extend(config, options);
        diffSecs = this.setCountDown(config);

        $('#' + $(this).attr('id') + ' .number').html('<div class="top"></div><div class="bottom"></div>');
        $(this).doCountDown($(this).attr('id'), diffSecs, 500);

        if (config.onComplete) {
            $.data($(this)[0], 'callback', config.onComplete);
        }
        if (config.omitWeeks) {
            $.data($(this)[0], 'omitWeeks', config.omitWeeks);
        }
        return this;
    };
    $.fn.stopCountDown = function() {
        clearTimeout($.data(this[0], 'timer'));
    };
    $.fn.startCountDown = function() {
        this.doCountDown($(this).attr('id'), $.data(this[0], 'diffSecs'), 500);
    };
    $.fn.setCountDown = function(options) {
        var targetTime = new Date();

        if (options.targetDate) {
            targetTime.setDate(options.targetDate.day);
            targetTime.setMonth(options.targetDate.month - 1);
            targetTime.setFullYear(options.targetDate.year);
            targetTime.setHours(options.targetDate.hour);
            targetTime.setMinutes(options.targetDate.min);
            targetTime.setSeconds(options.targetDate.sec);
        }
        else if (options.targetOffset) {
           ...