JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="clock">
	<div id="digit-10" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-9" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
	<div id="digit-8" class="digit">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell"></div>
		<div...

CSS

html, body {
  background-color: #e8635e;
}

.clock {
  font-size: 0;
  text-align: center;
  margin-top: 20px;
}
.clock .digit {
  display: inline-block;
  width: 88px;
  margin: 10px;
  transform: skewX(-2deg);
}
.clock .digit#digit-2 .cell {
  transition: opacity 50ms ease;
}
.clock .digit#digit-3 .cell, .clock .digit#digit-4 .cell, .clock .digit#digit-5 .cell, .clock .digit#digit-6 .cell, .clock .digit#digit-7 .cell, .clock .digit#digit-8 .cell, .clock .digit#digit-9 .cell, .clock .digit#digit-10 .cell, .clock .digit#digit-11 .cell {
  transition: opacity 100ms ease;
}
.clock .digit .cell {
  width: 18px;
  height: 18px;
  margin: 2px;
  background-color: white;
  border-radius: 2px;
  display: inline-block;
  opacity: 0.1;
}
.clock .digit .cell.on {
  opacity: 1;
}

JavaScript

var grad = new Date(2065, 3, 16, 17, 0, 0, 0, 0),
  digit0 = $('#digit-0');
  digit1 = $('#digit-1'),
  digit2 = $('#digit-2'),
  digit3 = $('#digit-3'),
  digit4 = $('#digit-4'),
  digit5 = $('#digit-5'),
  digit6 = $('#digit-6'),
  digit7 = $('#digit-7'),
  digit8 = $('#digit-8'),
  digit9 = $('#digit-9'),
  digit10 = $('#digit-10');

function renderDigit(container, number) {
  var matrix;
  switch(number) {
    case 0:
      matrix = [
        true, true, true, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true
      ];
      break;
    case 1:
      matrix = [
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
    case 2:
      matrix = [
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        true, true, true, true,
        true, false, false, false,
        true, false, false, false,
        true, true, true, true
      ];
      break;
    case 3:
      matrix = [
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        false, true, true, true,
        false, false, false, true,
        false, false, false, true,
        true, true, true, true
      ];
      break;
    case 4:
      matrix = [
        true, false, false, false,
        true, false, false, true,
        true, false, false, true,
        true, true, true, true,
        false, false, false, true,
        false, false, false, true,
        false, false, false, true
      ];
      break;
    case 5:
      matrix = [
        true, true, true, true,
        true, false, false, false,
        true, false, false, false,
       ...