JSFiddle - React, Tailwind, and code Playground

by hyperthalamus

HTML

<script src="http://mobileka.mercularity.com/jquery/jquery.countdown.min.js"></script>
<div class="timerPanel">
<a class="button pause"></a>
<a class="button restart"></a>
<div class="timer" id="timerDisplay"><span class="countdown_row countdown_amount">00:03:00</span></div>
<a class="button up"></a>
<a class="button down"></a>
</div>

CSS

body{
  background: #999;
}
div.timerPanel{
   position:fixed;
   top: 0;
   right: 0;
   width: 185px;
   height: 26px;
   background: #225;
   border: 1px solid #aaf;
}
div.timerPanel a.button{
   background: #000;
   width: 20px;
   height: 20px;
   float: left;
   margin: 3px 0 0 3px;
}
div.timerPanel a.pause{
   background: url(http://test.local/fd/imageAssets/pause.png) no-repeat 0 0;
}

div.timerPanel a.pause:hover{
   background: url(http://test.local/fd/imageAssets/pauseHover.png) no-repeat 0 0;
}

div.timerPanel a.play{
   background: url(http://test.local/fd/imageAssets/play.png) no-repeat 0 0;
}

div.timerPanel a.play:hover{
   background: url(http://test.local/fd/imageAssets/playHover.png) no-repeat 0 0;
}


div.timerPanel a.restart{
   background: url(http://test.local/fd/imageAssets/refresh.png) no-repeat 0 0;
}

div.timerPanel a.restart:hover{
   background: url(http://test.local/fd/imageAssets/refreshHover.png) no-repeat 0 0;
}

div.timerPanel a.up{
   float: right;
   background: url(http://test.local/fd/imageAssets/up.png) no-repeat 0 0;
}

div.timerPanel a.up:hover{
   background: url(http://test.local/fd/imageAssets/upHover.png) no-repeat 0 0;
}


div.timerPanel a.down{
   float: right;
   background: url(http://test.local/fd/imageAssets/down.png) no-repeat 0 0;
}

div.timerPanel a.down:hover{
   background: url(http://test.local/fd/imageAssets/downHover.png) no-repeat 0 0;
}


div.timerPanel div.timer{
   width: 90px;
   height: 26px;
   float: left;
   font-size: 20px;
   color: #66f;
}
div.timerPanel div.timer span{
  margin : 0 auto;
  display : block;
  text-align: center;
}

JavaScript

//$.countdown.setDefaults({});
$(function(){
    $("#timerDisplay").countdown(
    {
        until: "20M",
        compact: true
    });
})