JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script src="http://countdownjs.org/countdown.min.js"></script>
<div id="container">
    <canvas class="countdown" id="days" width="200" height="200"></canvas>
    <canvas class="countdown" id="hours" width="200" height="200"></canvas>
    <canvas class="countdown" id="minutes" width="200" height="200"></canvas>
    <canvas class="countdown" id="seconds" width="200" height="200"></canvas>
</div>

CSS

canvas.countdown {
    margin:10px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    font-family:'Open Sans', sans-serif;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAclBMVEUAAAD///8AAAAAAAAAAAAAAAAYGBgAAAAgICAdHR0cHBwLCwsAAAAREREaGhpAQEAICAgUFBQQEBBgYGD///+AgIAVFRUJCQnGxsYgICCOjo4RGhFxcXFQUFBwcHA5OTkKCgogICAoKCgUCgoVIBUQEBDocwHyAAAAJnRSTlMJACAEGBogHhgaCRgQHh4QIBogEAkQGB4JEAkeCRAQCRogIBoYEBVFgxUAAAEoSURBVBgZBcEHglNRDAQwje33S0i2E3qH+18RySfFEQdbUskwyaDkYOKQSSapmMSHeJCKLRkmeaKkpM/Y2Ji3z5uUTGxvsrOieOF4/6M4khF7bDKxURSTTHrXKVaUbxPFnTsPKIrFUBzfL7e2e1R6UcnE7zj4wrPLjrMVJxUlt3boaf2hs2SxknIZlp5HVvLwNetVRSU7d+6cOmf34kmGI5l25x1ZbaM4k19M/Gyr207pelRSyRl793Qv6ZL1qijqonw8krP1SSWLikq2ZGQPq183iopiS7bHFEWvWDKxvU/xcknxgooH9mSSmwwVZz7aWTKyM9zikE1KeuQ5WfpZFjtPFD3p1dbFtGu7UVJhdS/e6eme7j+dv1IcYrXp/nfta1/n2oud8h/30gjk6alZDQAAAABJRU5ErkJggg==) repeat;
    background-color:#faa61a;
}

JavaScript

(function () {
    AZCountDown({
        secondsColor: "#ffdc50",
        secondsGlow: "none",

        minutesColor: "#9cdb7d",
        minutesGlow: "none",

        hoursColor: "#378cff",
        hoursGlow: "none",

        daysColor: "#ff6565",
        daysGlow: "none",

        startDate: "1357034400",
        endDate: "1386496800",
        now: "1366878128",
        seconds: "08"
    });
})();


function AZCountDown(settings) {
    var glob = settings;

    function deg(degr) {
        return (Math.PI / 180) * degr - (Math.PI / 180) * 90;
    }

    glob.total = Math.floor((glob.endDate - glob.startDate) / 86400);
    glob.days = Math.floor((glob.endDate - glob.now) / 86400);
    glob.hours = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
    glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60);

    if (glob.now >= glob.endDate) {
        return;
    }

    var clock = {
        set: {
            days: function () {
                var cdays = $("#days")
                    .get(0);
                var ctx = cdays.getContext("2d");
                ctx.clearRect(0, 0, cdays.width, cdays.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.daysColor;

                ctx.shadowBlur = 10;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.shadowColor = glob.daysGlow;

                ctx.arc(100, 100, 90, deg(0), deg((360 / glob.total) * (glob.total - glob.days)));
                ctx.lineWidth = 17;
                ctx.stroke();
                $(".clock_days .val")
                    .text(glob.days);
            },

            hours: function () {
                var cHr = $("#hours")
                    .get(0);
                var ctx = cHr.getContext("2d");
                ctx.clearRect(0, 0, cHr.width, cHr.height);
                ctx.beginPath();
                ctx.strokeStyle = glob.hoursColor;

                ctx.shadowBlur =...