JSFiddle - React, Tailwind, and code Playground

Hex code color = Time Changes color to current times' hex code

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<h1 id="t"></h1>
<h2 id="h"></h2>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body {
  color: #fff;
  font-family: "Dosis", sans-serif;
}
h1, h2 {
  text-align: center;
}
h1 {
  font-size: 6em;
}

JavaScript

(function() {
    var dotime;
    
    dotime = function() {
        var d, hex, hours, mins, secs;
        $("body").css({
            transition: "all 0.8s",
            "-webkit-transition": "all 0.8s"
        });
        d = new Date();
        hours = d.getHours();
        mins = d.getMinutes();
        secs = d.getSeconds();
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (mins < 10) {
            mins = "0" + mins;
        }
        if (secs < 10) {
            secs = "0" + secs;
        }
        hex = "#" + hours + mins + secs;
        $("#t").html(hours + " : " + mins + " : " + secs);
        $("#h").html(hex);
        document.body.style.background = hex;
        setTimeout((function() {
            dotime();
        }), 1000);
    };
    
    window.onload = dotime();
    
}).call(this);