JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<body>
    <p id="records" style="float: left;">Record:</p>
    <div id="viewWindow">
        <div id="faceSec">
            <div id="_0" class='numeral'><span>45</span>

            </div>
            <div id="_1" class='numeral'><span>46</span>

            </div>
            <div id="_2" class='numeral'><span>47</span>

            </div>
            <div id="_3" class='numeral'><span>48</span>

            </div>
            <div id="_4" class='numeral'><span>49</span>

            </div>
            <div id="_5" class='numeral'><span>50</span>

            </div>
            <div id="_6" class='numeral'><span>51</span>

            </div>
            <div id="_7" class='numeral'><span>52</span>

            </div>
            <div id="_8" class='numeral'><span>53</span>

            </div>
            <div id="_9" class='numeral'><span>54</span>

            </div>
            <div id="_10" class='numeral'><span>55</span>

            </div>
            <div id="_11" class='numeral'><span>56</span>

            </div>
            <div id="_12" class='numeral'><span>57</span>

            </div>
            <div id="_13" class='numeral'><span>58</span>

            </div>
            <div id="_14" class='numeral'><span>59</span>

            </div>
            <div id="_15" class='numeral'><span>00</span>

            </div>
            <div id="_16" class='numeral'><span>01</span>

            </div>
            <div id="_17" class='numeral'><span>02</span>

            </div>
            <div id="_18" class='numeral'><span>03</span>

            </div>
            <div id="_19" class='numeral'><span>04</span>

            </div>
            <div id="_20" class='numeral'><span>05</span>

            </div>
            <div id="_21" class='numeral'><span>06</span>

            </div>
            <div id="_22" class='numeral'><span>07</span>

            </div>
            <div id="_23" class='numeral'><span>08</span>

            </div>
            <div...

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
#viewWindow {
    position:relative;
    top:475px;
    left: 1080px;
    height: 50px;
    width: 485px;
    border: 1.5px solid red;
    opacity: 50%;
    margin: 0;
    padding: 0;
    /*  overflow: hidden;*/
    background: #81F79F;
}
#faceSec {
    position: absolute;
    display:block;
    top: -475px;
    left: -690px;
    height: 1000px;
    width: 1000px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    /*	background: #81F79F;*/
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    -ms-border-radius: 500px;
    -o-border-radius: 500px;
    border-radius: 500px;
}
#faceSec > .numeral {
    left: 480px;
    clear: none;
    display: inline-block;
    position: absolute;
    float: left;
    height: 1000px;
    color : #0489B1;
}
#faceMin {
    position: absolute;
    display:block;
    top: -425px;
    left: -640px;
    height: 900px;
    width: 900px;
    font-family:"Comic Sans MS", cursive, sans-serif;
    /*	background: #F5DA81;*/
    -webkit-border-radius: 450px;
    -moz-border-radius: 450px;
    -ms-border-radius: 450px;
    -o-border-radius: 450px;
    border-radius: 450px;
}
#faceMin > .numeral {
    left: 428px;
    clear: none;
    display: inline-block;
    position: absolute;
    float: left;
    height: 900px;
    color : #DF7401;
}
.numeral span {
    position: relative;
    float: left;
    top: 10px;
    font-size: 35px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#_0 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
#_1 {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
}
#_2 {
   ...

JavaScript

/////////Start Vars////////////////////////////
  var sendTime = new Date("November 25, 2013 16:24:00");
  var sendTimeInSeconds = sendTime.getTime();
  var Timer;
  var CorrecTimer;
  var rot = 0;
  var corrot = 0;
  var degR = 1.2;
  var secDegree = 0;
  var minDegree = 0;
  var timeStart = 1;
  //////////Initialization/////////////
  /*	timeRemaining(openTimeInSeconds);  /////////Time Initialization 
	  	var secCounter =  secNum;
		var minCounter =  minNum;
	ClockRotate(secDegree, minDegree); /////////Clock Initialization 
*/

  timerCorrection(timeStart);
  //  alert("hello"+secDegree+"||"+minDegree);
  //////////Tab Detect/////////////////
  (function () {
      var hidden = "hidden";
      // Standards:
      if (hidden in document) document.addEventListener("visibilitychange", onchange);
      else if ((hidden = "mozHidden") in document) document.addEventListener("mozvisibilitychange", onchange);
      else if ((hidden = "webkitHidden") in document) document.addEventListener("webkitvisibilitychange", onchange);
      else if ((hidden = "msHidden") in document) document.addEventListener("msvisibilitychange", onchange);
      // IE 9 and lower:
      else if ('onfocusin' in document) document.onfocusin = document.onfocusout = onchange;
      // All others:
      else window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

      ///// No Change---Normal Run---////
      timeCheck();
      clockUpdate();

      function onchange(evt) {
          clearTimeout(Timer);
          var v = 'visible',
              h = 'hidden',
              evtMap = {
                  focus: v,
                  focusin: v,
                  pageshow: v,
                  blur: h,
                  focusout: h,
                  pagehide: h
              };
          evt = evt || window.event;
          if (evt.type in evtMap) document.body.className = evtMap[evt.type];
          else document.body.className = this[hidden] ? "hidden" : "visible";

     ...