JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="clock">
  <div class="h-1">
    <div class="n-1">
      <time class="t-01"></time>
      <time class="t-02"></time>
      <time class="t-03"></time>
      <time class="t-04"></time>
      <time class="t-05"></time>
      <time class="t-06"></time>
      <time class="t-07"></time>
      <time class="t-08"></time>
      <time class="t-09"></time>
      <time class="t-10"></time>
      <time class="t-11"></time>
      <time class="t-12"></time>
      <time class="t-13"></time>
      <time class="t-14"></time>
      <time class="t-15"></time>
      <time class="t-16"></time>
      <time class="t-17"></time>
      <time class="t-18"></time>
      <time class="t-19"></time>
      <time class="t-20"></time>
      <time class="t-21"></time>
      <time class="t-22"></time>
      <time class="t-23"></time>
      <time class="t-24"></time>
    </div>
  </div>
  <div class="h-2">
    <div>
      <time class="t-01"></time>
      <time class="t-02"></time>
      <time class="t-03"></time>
      <time class="t-04"></time>
      <time class="t-05"></time>
      <time class="t-06"></time>
      <time class="t-07"></time>
      <time class="t-08"></time>
      <time class="t-09"></time>
      <time class="t-10"></time>
      <time class="t-11"></time>
      <time class="t-12"></time>
      <time class="t-13"></time>
      <time class="t-14"></time>
      <time class="t-15"></time>
      <time class="t-16"></time>
      <time class="t-17"></time>
      <time class="t-18"></time>
      <time class="t-19"></time>
      <time class="t-20"></time>
      <time class="t-21"></time>
      <time class="t-22"></time>
      <time class="t-23"></time>
      <time class="t-24"></time>
    </div>
  </div>
  <div class="m-1">
    <div>
      <time class="t-01"></time>
      <time class="t-02"></time>
      <time class="t-03"></time>
      <time class="t-04"></time>
      <time class="t-05"></time>
      <time class="t-06"></time>
      <time class="t-07"></time>
      <time...

SCSS

.clock {
  padding: 40px;
  .h-1,
  .h-2,
  .m-1,
  .m-2 {
    width: 50%;
    float: left;
    position: relative;
    &:before {
      content: "";
      padding-top: 150%;
      display: block;
    }
    >DIV {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  TIME {
    float: left;
    width: calc(100%/4);
    height: calc(100%/6);
    display: block;
    background: #eeeeee;
    border-radius: 50%;
    position: relative;
    &:before,
    &:after {
      border-radius: 1%;
      content: "";
      display: block;
      width: 2px;
      height: 50%;
      background: #424242;
      left: 50%;
      position: absolute;
      transform: translateX(-1px);
      transform-origin: center bottom;
    }
  }
}

$0 = 0;
$15 = 15;
$30 = 30
$45 = 45;

// rotate
@mixin rotate ($deg) {
 transform: rotate(#{$deg}deg);
}

.n-1 {
  .t-01 {
    &:before {
      /* minute */
      @include rotate(15);
    }
    &:after {
      /* minute */
      @include rotate(30);
    }
  }
  .t-02 {
    &:before {
      /* minute */
      transform: rotate(180deg);
    }
    &:after {
      /* minute */
      transform: rotate(90deg);
    }
  }
}