JSFiddle - React, Tailwind, and code Playground

by sedran

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="leftFrame">
    <div id="j-date">
        <svg width="200" height="200">
            <circle id="cerceve1" cx="100" cy="100" r="97" stroke-width="6" stroke="#56ffff" fill="#000000" />
            <circle id="cerceve2" cx="100" cy="100" r="84" stroke-width="6" stroke="#b1eded" fill="#000000" />
            <path d="M 22,93 a 85 85, 0, 0, 0, 85 85" fill="null" stroke="#56ffff" stroke-width="25" />
            
            <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="30" id="j-date-text" y="90" x="100" stroke-width="0" fill="#56ffff" font-weight="bold"></text>
            <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="45" id="j-date-number" y="130" x="100" stroke-width="0" fill="#56ffff" font-weight="bold"></text>
        </svg>
    </div>
    
    <div id="j-clock">
        <svg width="200" height="200">
            <circle id="cerceve1" cx="100" cy="100" r="97" stroke-width="6" stroke="#56ffff" fill="#000000" />
            <circle id="cerceve2" cx="100" cy="100" r="85" stroke-width="6" stroke="#b1eded" fill="#000000" />
            <line stroke="#56ffff" id="j-clock-long" y2="100" x2="100" y1="100" x1="100" stroke-width="3" fill="none"/>
            <line stroke="#56ffff" id="j-clock-short" y2="100" x2="100" y1="100" x1="100" stroke-width="4" fill="none"/>
        </svg>
    </div>
    
    <div id="j-temp">
        <svg width="200" height="200">
            <circle id="cerceve1" cx="100" cy="100" r="97" stroke-width="6" stroke="#56ffff" fill="#000000" />
            <circle id="cerceve2" cx="100" cy="100" r="85" stroke-width="6" stroke="#b1eded" fill="#000000" />
            <path d="M 22,93 a 85 85, 0, 0, 0, 85 85" fill="null" stroke="#56ffff" stroke-width="25" />
            
            <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="30" id="j-temp-text" y="90" x="100"...

CSS

body {
    background: #000;
}

#leftFrame {
    border-left: 2px solid #b1eded;
    border-top: 2px solid #b1eded;
    padding-left: 10px;
    margin-left: 10px;
    padding-top: 10px;
    margin-top: 10px;
    width: 250px;
}

JavaScript

var modules = {};

modules.dateModule = (function dateModule() {
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    
    var textField = $("#j-date-text");
    var numberField = $("#j-date-number");
    
    var stopped = false;
    var timeout = null;
    
    (function reCalculate() {
        var today = new Date();
        var tomorrow = new Date();
        tomorrow.setDate(today.getDate() + 1);
        tomorrow.setHours(0, 0, 0, 0);
        var timeout = parseInt((tomorrow.getTime() - today.getTime()) / 2) || 1;
        
        var day = today.getDate();
        var month = today.getMonth();
        textField.text(months[month]);
        numberField.text(day);
        
        if (!stopped) {
            timeout = setTimeout(reCalculate, timeout);
        }
    }());
    
    return {
        stop: function () {
            stopped = true;
            clearTimeou(timeout);
        }
    };
}());

(function clockModule() {
    var CLOCK_LONG = 80;
    var CLOCK_SHORT = 60;
    var xcenter = 100;
    var ycenter = 100;
    
    var longLine = $("#j-clock-long");
    var shortLine = $("#j-clock-short");
    
    function showClock() {
        var date = new Date();
        var xhour, yhour, xminute, yminute, minute, hour;
        hour = date.getHours();
        minute = date.getMinutes();
        
        xminute = (Math.cos(minute * 3.14 / 30 - 3.14 / 2) * CLOCK_LONG + xcenter);
        yminute = (Math.sin(minute * 3.14 / 30 - 3.14 / 2) * CLOCK_LONG + ycenter);
        xhour = (Math.cos((hour * 30 + minute / 2) * 3.14 / 180 - 3.14 / 2) * CLOCK_SHORT + xcenter);
        yhour = (Math.sin((hour * 30 + minute / 2) * 3.14 / 180 - 3.14 / 2) * CLOCK_SHORT + ycenter);
        
        longLine.attr("x1", xminute).attr("y1", yminute);
        shortLine.attr("x1", xhour).attr("y1", yhour);
    }

    showClock();
    setInterval(showClock, 1000);
}());

(function...