JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="time"><span id="hour"></span><span id="colon">:</span><span id="minute"></span></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);

html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    
    background: #148ff5;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#148ff5), to(#137bd1));
    background: -webkit-linear-gradient(#148ff5 0%, #137bd1 100%);
    background: -moz-linear-gradient(#148ff5 0%, #137bd1 100%);
    background: -o-linear-gradient(#148ff5 0%, #137bd1 100%);
    background: linear-gradient(#148ff5 0%, #137bd1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#148ff5', endColorstr='#137bd1',GradientType=0 );
}
#time {
    color:white;
    font-size:16em;
    font-family: 'Press Start 2P', cursive;
    text-shadow:1px 1px 0px #bbb,
                2px 2px 0px #bbb,
                3px 3px 0px #bbb,
                4px 4px 0px #bbb,
                5px 5px 0px #bbb,
                6px 6px 0px #bbb,
                7px 7px 0px #bbb,
                8px 8px 0px #bbb,
                9px 9px 0px #bbb,
                10px 10px 0px #bbb;
    display: block;
    width:100%;
    text-align:center;
    margin-top:-112px;
    position:fixed;
    top:50%;
}

JavaScript

var date;
function zeroPad(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
function updateTime() {
    date = new Date();
    document.getElementById("hour").innerHTML = (date.getHours() - 1) % 12 + 1;
    document.getElementById("minute").innerHTML = zeroPad(date.getMinutes());
}
setInterval(function(){updateTime()}, 500);