JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="centerbox">
  <section class="timer box connecting unselectable">
      <div class="timer-status">&nbsp</div>
      <div class="timer-qr">
          <img src="https://chart.googleapis.com/chart?chs=69x69&cht=qr&chl=Hello" />
      </div>
      <div class="timer-counter">
          <label class="days">123</label>
          <label class="hours">45</label>
          <label class="mins">67</label>
          <label class="secs">89</label>
          <label class="milsecs">0123</label>
      </div>
      <div class="timer-button">
          <span class="border">
          <button class="start">Start</button>
          </span>
      </div>
      <div class="timer-button">
          <span class="border">
          <button class="history">History</button>
          </span>
      </div>
  </section>
</div>

CSS

/* Helper function */
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}


.centerbox {
/* positioninig */
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
/* basic styling */
width: 100%;
font-size: 14px;
background : #CFC url(http://alienbikes.com/main_bkg.jpg);
margin: 0; padding: 0;

/* flexbox, por favor */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;

display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}


/* Timer layout */
.box {
  /* basic styling */
  margin: 0; padding: 0;

  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: -moz-box;
  -moz-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}
.box > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;

  -moz-transition: width 0.7s ease-out;
  -o-transition: width 0.7s ease-out;
  -webkit-transition: width 0.7s ease-out;
  transition: width 0.7s ease-out;
}


.timer.online { 
text-shadow:0 1px rgba(0,0,0,0.1);
background-color:#5FB000;
border:1px solid #488500;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);
-moz-box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);
box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);   
}
.timer.offline { 
text-shadow:0 1px rgba(0,0,0,0.1);background-color:#e9e9e9;background-image:-webkit-gradient(linear,left top,left...