JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<div id="watch">

  <!-- Days -->
  <div class="dash days_dash">
    <div class="digit day_field" style="display: none;">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <div class="digit">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <div class="digit">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <span class="dash_title">DĂ­as</span>
  </div>
  <!-- End Days -->

  <!-- Hours -->
  <div class="dash hours_dash">
    <div class="digit">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <div class="digit">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <span class="dash_title">Horas</span>
  </div>
  <!-- End Hours -->

  <!-- Minutes -->
  <div class="dash minutes_dash">
    <div class="digit">
      <div class="top" style="display: none;">0</div>
      <div class="bottom" style="display: block;">0</div>
    </div>
    <div class="digit">
      <div class="top" style="display: none;">8</div>
      <div class="bottom" style="display: block;">8</div>
    </div>
    <span class="dash_title">Minutos</span>
  </div>
  <!-- End Minutes -->

  <!-- Seconds -->
  <div class="dash seconds_dash">
    <div class="digit">
      <div class="top" style="display: none;">5</div>
      <div class="bottom" style="display: block;">5</div>
    </div>
    <div class="digit">
      <div class="top" style="display: none;">8</div>
      <div class="bottom" style="display: block;">8</div>
    </div>
    <span class="dash_title">Segundos</span>
  </div>
  <!-- End Seconds -->

</div>

CSS

* {
    font-family: 'Exo 2', sans-serif;
    font-weight: 300
  }

  html {
    height: 100%
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #f6f7f9;
    font-weight: 600
  }

  body {
    font-size: 16px;
    line-height: 24px;
    margin: 0 auto;
    position: relative;
    background-color: #dceaf3
  }

  h1 {
    font-size: 93px;
    line-height: 96px;
    margin-top: 48px;
    margin-bottom: 24px;
    font-weight: 900
  }

  h2 {
    font-size: 52px;
    line-height: 72px;
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 900
  }

  h3 {
    font-size: 29px;
    line-height: 48px;
    margin-top: 24px;
    margin-bottom: 24px
  }

  h4 {
    font-size: 16px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px
  }

  blockquote,
  ol,
  p,
  pre,
  table,
  ul {
    margin-top: 24px;
    margin-bottom: 24px
  }

  hr {
    border: 1px solid;
    margin: -1px 0
  }

  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin-top: 0;
    margin-bottom: 0
  }

  b,
  code,
  em,
  small,
  strong {
    line-height: 1
  }

  sub,
  sup {
    vertical-align: baseline;
    position: relative;
    top: -.4em
  }

  sub {
    top: .4em
  }

  p {
    font-weight: 300;
    color: #373b3e
  }

  .uppercase {
    text-transform: uppercase
  }

  .error {
    border-color: red !important
  }

  .title {
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    color: #000;
    line-height: 28px;
    margin: 25px 10px 25px 10px
  }

  ::-webkit-input-placeholder {
    color: #373b3e
  }

  :-moz-placeholder {
    color: #373b3e;
    opacity: 1
  }

  ::-moz-placeholder {
    color: #373b3e;
    opacity: 1
  }

  :-ms-input-placeholder {
    color: #373b3e
  }

  #watch {
    color: #f6f7f9;
    text-align: center
  }

  #watch .dash {
    display: inline-block;
    padding: 20px 30px;
    line-height: 72px;
    text-align: center;
    margin: 0 -3px
  }

  #watch .dash:first-child {
    border-radius: 8px 0 0 8px;
    background-color:...

JavaScript

$.fn.countDown = function(options) {

  config = {};

  $.extend(config, options);

  diffSecs = this.setCountDown(config);

  if (config.onComplete) {
    $.data($(this)[0], 'callback', config.onComplete);
  }
  if (config.omitWeeks) {
    $.data($(this)[0], 'omitWeeks', config.omitWeeks);
  }

  $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
  $(this).doCountDown($(this).attr('id'), diffSecs, 500);

  return this;

};

$.fn.stopCountDown = function() {
  clearTimeout($.data(this[0], 'timer'));
};

$.fn.startCountDown = function() {
  this.doCountDown($(this).attr('id'), $.data(this[0], 'diffSecs'), 500);
};

$.fn.setCountDown = function(options) {
  var targetTime = new Date();

  if (options.targetDate) {
    targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
  } else if (options.targetOffset) {
    targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
    targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
    targetTime.setDate(options.targetOffset.day + targetTime.getDate());
    targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
    targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
    targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
  }

  var nowTime = new Date();

  diffSecs = Math.floor((targetTime.valueOf() - nowTime.valueOf()) / 1000);

  $.data(this[0], 'diffSecs', diffSecs);

  return diffSecs;
};

$.fn.doCountDown = function(id, diffSecs, duration) {
  $this = $('#' + id);
  if (diffSecs <= 0) {
    diffSecs = 0;
    if ($.data($this[0], 'timer')) {
      clearTimeout($.data($this[0], 'timer'));
    }
  }

  secs = diffSecs % 60;
  mins = Math.floor(diffSecs / 60) % 60;
  hours =...