JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script src="http://countdownjs.org/countdown.min.js"></script>
<div id="container">
    <div class="countdown" id="days" width="200" height="200"></div>
    <div class="countdown" id="hours" width="200" height="200"></div>
    <div class="countdown" id="minutes" width="200" height="200"></div>
    <div class="countdown" id="seconds" width="200" height="200"></div>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.countdown > div {
    padding:8px !important;
    background-color:#dedede;
}

JavaScript

//date
    var day = 1;
    var month = 5;
    var year = 2013;

    //color
    var arcColor = '#a72244';
    var innerCircleColor = '#faa61a';
    var outCircleColor = '#fff';

    //outer circle
    var widthCanvas = document.getElementsByClassName('countdown')[0];
    var radiusOuter = parseInt(widthCanvas.getAttribute("width"), 10) / 2;

    //inner circle 
    var radiusInner = 4 / 5 * radiusOuter;

    //arc 
    var arcWidth = radiusOuter - radiusInner;
    var startAngle = 3 / 2 * Math.PI;

    //text
    var textfontFamily = 'Arial';
    var textfontSize = 32;
    var textFill = 'white';



    var timerId = new countdown(
    new Date(year, month - 1, day),

    function (ts) {
        time = [ts.days, ts.hours, ts.minutes, ts.seconds];
        return time;
    },
    countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS);

    var stageDays = new Kinetic.Stage({
        container: 'days',
        width: radiusOuter * 2,
        height: radiusOuter * 2
    });
    var stageHours = stageDays.clone({
        container: 'hours'
    });
    var stageMinutes = stageDays.clone({
        container: 'minutes'
    });
    var stageSeconds = stageDays.clone({
        container: 'seconds'
    });

    //layer
    var layerDays = new Kinetic.Layer();
    var layerHours = new Kinetic.Layer();
    var layerMinutes = new Kinetic.Layer();
    var layerSeconds = new Kinetic.Layer();

    //group
    var group = new Kinetic.Group({
        x: radiusOuter,
        y: radiusOuter
    });
    //outercircle
    var outerCircle = new Kinetic.Circle({
        radius: radiusOuter,
        fill: outCircleColor
    });

    //innercircle by cloning the outercircle
    var innerCircle = outerCircle.clone({
        radius: radiusInner,
        fill: innerCircleColor
    });

    //arc
    var layer = new Kinetic.Layer();
    var arc = new Kinetic.Shape({
        drawFunc: function (canvas) {
            var startAngle = this.getAttrs().startAngle;
           ...