JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<script src="https://fonts.googleapis.com/css?family=Lato:100"></script>

<div id="hex-clock"></div>

CSS

/*styling #hex*/

/*custom font - Lato*/
@import url("http://fonts.googleapis.com/css?family=Lato:100");
/*basic reset*/
* {margin: 0; padding: 0;}
/*make the body occupy full height*/
html, body {height: 100%;}

#hex-clock {
	color: white; font: 64px/64px Lato; height: 64px;
	/*Vertical centering*/
	position: relative; top: 50%; margin-top: -32px;
	/*Horizontal centering*/
	text-align: center;
}

JavaScript

var d, h, m, s, color;

function displayTime(){
    d = new Date();
    h = d.getHours();
    m = d.getMinutes();
    s = d.getSeconds();
    
    if (h <= 9) h = '0'+h;
    if (m <= 9) m = '0'+m;
    if (s <= 9) s = '0'+s;
    
    color = '#'+h+m+s;
    
    document.body.style.background = color;
    
    document.getElementById('hex-clock').innerHTML = color;
    
    setTimeout(displayTime, 1000);
}
displayTime();