JSFiddle - React, Tailwind, and code Playground

HTML

<div id="digital">
  <span id="y"></span>.<span id="m"></span>.<span id="d"></span> <span id="h"></span>:<span id="i"></span>:<span id="s"></span>
</div>

<canvas id="HorizontalBarDigitalClock"></canvas>

CSS

body {
  background-color:#000;
  padding:0;
  margin:0;
  overflow:hidden;
  color:#fff;
}

#HorizontalBarDigitalClock {
     background-color:#F5F5F5;
}

#digital {
  border-radius:5px;
  /*border:1px solid #fff;
  background-color:#d00;
  /padding:5px;*/
  margin:10px;
  color:#fff;
  font-family:'Arial';
  font-weight:bold;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
}

JavaScript

HorizontalBarDigitalClock = new function(){

  var CANVAS_WIDTH = 280;
  var CANVAS_HEIGHT = 260;
  var BAR_HEIGHT = 50;
  var BAR_MARGIN_WIDTH = 20;

  var canvas;
  var context;
  var doc = document;
  var timerID,per = null;

  var colors = {
    y:'#ff1e1e',
    m:'#ff1e8e',
    d:'#8e1eff',
    h:'#1e8eff',
    i:'#1eff8e',
    s:'#8eff1e',
  };

  var $ = function(id)
  {
    return doc.getElementById(id);
  };

  this.init = function()
  {
    canvas = $('HorizontalBarDigitalClock');

    if (canvas && canvas.getContext)
    {
      context = canvas.getContext('2d');
      setting();
      enterFrame();
      timerID = setInterval(enterFrame, 1000);
      window.addEventListener('resize', resize, false);
    }
  };

  function resize()
  {
    clearInterval(timerID);
    context.clearRect(0, 0, canvas.width, canvas.height);
    HorizontalBarDigitalClock.init();
  }

  function setting()
  {
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;
  }

  function digit(num)
  {
    return num > 9 ? num : '0'+num ;
  }

  function draw(num, max, cnt, id)
  {
    per = 100 / max * num;

    context.beginPath();
    context.fillStyle = colors[id];
    context.fillRect((BAR_HEIGHT * cnt) + (BAR_MARGIN_BOTTOM * cnt), CANVAS_HEIGHT - (CANVAS_HEIGHT * (per / 100)), BAR_HEIGHT, CANVAS_HEIGHT );
    context.fill();

    $(id).innerHTML = digit(num);
  }

  function enterFrame()
  {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var t = new Date();
    var y = t.getFullYear();

    draw(  t.getHours(), 60, 1, 'h');
    draw(t.getMinutes(), 60, 2, 'i');
    draw(t.getSeconds(), 60, 3, 's');
      
    draw(  t.getMonth(), 12, 4, 'm');
    draw(  t.getDate(), 31, 5, 'd');
  }
};

HorizontalBarDigitalClock.init();