JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="holder"></div> 
<div id="time"> 
  <span id="h"></span>:<span id="m"></span>:<span id="s"></span> <span id="ampm"></span> <span id="d"></span>/<span id="mnth"></span> 
</div>

CSS

#copy {
  font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
  bottom: 0;
  font-size: .7em;
  position: absolute;
  right: 1em;
  text-align: right;
}
#copy a {
  color: #f50;
  font-weight:bold;
}
#holder {
  left: 50%;
  position: absolute;
  top: 0;
}
#time {
  text-align:center;
  font-weight:bold;
  font-size:15px;
  font-family:'Arial', sans-serif;
}

JavaScript

window.onload = function () {

  var SCREEN_W = window.innerWidth;
  var SCREEN_H = window.innerHeight;
  var BASE_WH = (SCREEN_W > SCREEN_H ? SCREEN_H : SCREEN_W);
  var HALF_WH = BASE_WH / 2;

  var STYLE = document.getElementById('holder').style;
  STYLE.width  = BASE_WH;
  STYLE.height = BASE_WH;
  STYLE.marginTop    = '8px';
  STYLE.marginRight  = 0;
  STYLE.marginBottom = 0;
  STYLE.marginLeft   = '-'+HALF_WH+'px';

  var r = Raphael("holder", BASE_WH, BASE_WH),
    R = 200,
    init = true,
    param = {stroke: "#fff", "stroke-width": 30},
    html = [
      document.getElementById("h"),
      document.getElementById("m"),
      document.getElementById("s"),
      document.getElementById("d"),
      document.getElementById("mnth"),
      document.getElementById("ampm")
    ];

  var FLOAT_WH = HALF_WH + 0.001;
  var START_WH = HALF_WH + 1;
  var END_WH = HALF_WH;

  var sec = r.path(["M", FLOAT_WH, FLOAT_WH - R, "A", R, R, 0, 0, 1, START_WH, END_WH - R].join(",")).attr(param);
  R = 160;                         
  var min = r.path(["M", FLOAT_WH, FLOAT_WH - R, "A", R, R, 0, 0, 1, START_WH, END_WH - R].join(",")).attr(param);
  R = 120;                         
  var hor = r.path(["M", FLOAT_WH, FLOAT_WH - R, "A", R, R, 0, 0, 1, START_WH, END_WH - R].join(",")).attr(param);
  R = 80;                          
  var day = r.path(["M", FLOAT_WH, FLOAT_WH - R, "A", R, R, 0, 0, 1, START_WH, END_WH - R].join(",")).attr(param);
  R = 40;                          
  var mon = r.path(["M", FLOAT_WH, FLOAT_WH - R, "A", R, R, 0, 0, 1, START_WH, END_WH - R].join(",")).attr(param);
  var pm = r.circle(HALF_WH, HALF_WH, 16).attr({stroke: "none", fill: Raphael.hsb2rgb(15 / 200, 1, 0.75).hex});
  html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, 0.75).hex;

  function updateVal(value, total, R, hand, id) {
    var alpha = 360 / total * value,
      a = (90 - alpha) * Math.PI / 180,
      x = HALF_WH + R * Math.cos(a),
      y = HALF_WH - R * Math.sin(a),
      color =...