JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ripplejs/waves/master/dist/waves.js"></script>
<script id="template" type="text/template">
  <div class="clock">
    <div class='left'>
      <p>Today is {{ time | day }} {{ time | month }} {{ time | date}}.
        <br>The time is:</p>
      <span class='time'>
        <span class='hours'>{{ time.getHours() | pad }}</span>:
      <span class='minutes'>{{ time.getMinutes() | pad }}</span>:
      <span class='seconds'>{{ time.getSeconds() | pad }}</span>
      </span>
    </div>

    <div class='right'>
      <div class='square'>
        <svg viewBox='0 0 100 100'>
          <g transform='translate(50,50)'>
            <circle class='clock-face' r='48' />
            <g each="{{ minutes }}">
              <line class='major' y1='35' y2='45' transform='rotate( {{ 360 * $index / 60 }} )' />
            </g>
            <g each="{{ hours }}">
              <line class='minor' y1='35' y2='45' transform='rotate( {{ 360 * $index / 12 }} )' />
            </g>
            <line class='hour' y1='2' y2='-20' transform='rotate( {{ 30 * time.getHours() + time.getMinutes() / 2 }} )' />
            <line class='minute' y1='4' y2='-30' transform='rotate( {{ 6 * time.getMinutes() + time.getSeconds() / 10 }} )' />
            <g transform='rotate( {{ 6 * time.getSeconds() }} )'>
              <line class='second' y1='10' y2='-38' />
              <line class='second-counterweight' y1='10' y2='2' />
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</script>

CSS

.left,
.right {
  float: left;
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.left {
  padding-right: 1em;
}

.left p {
  font-size: 1.4em;
}

.right {
  padding-left: 1em;
}

#example p {
  margin: 1em 0 0 0;
}

.time {
  font-family: 'Voltaire';
  font-size: 3em;
  margin: 0;
}

.square {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.clock-face {
  stroke: #333;
  fill: white;
}

.minor {
  stroke: #999;
  stroke-width: 0.5;
}

.major {
  stroke: #333;
  stroke-width: 1;
}

.hour {
  stroke: #333;
}

.minute {
  stroke: #666;
}

.second,
.second-counterweight {
  stroke: rgb(180, 0, 0);
}

g {
  box-shadow: 20px 22px 35px 20px rgb(123, 255, 56);
}

.second-counterweight {
  stroke-width: 3;
}

JavaScript

var Clock = waves('#template');

// Hook for when the view is created. This fires
// before the view is rendered
Clock.created(function() {
  this.interval = setInterval(this.tick, 1000);
  this.data.time = new Date();
  this.data.minutes = new Array(60);
  this.data.hours = new Array(12);
});

// Add interpolation filters
Clock.filter({
  pad: function(num) {
    return String(num < 10 ? '0' + num : num);
  },
  date: function(val) {
    return val.getDate();
  },
  month: function(val) {
    var month = val.getMonth();
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    return months[month];
  },
  day: function(val) {
    var day = val.getDay();
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return days[day];
  }
});

// Every second this will get called and
// update the current time
Clock.prototype.tick = function() {
  this.set('time', new Date());
};

// Create a new clock
var clock = new Clock();

// Append it
clock.appendTo('body');