JSFiddle - React, Tailwind, and code Playground
by Alireza Safian
HTML
<script src="http://final-countdown.pragmaticmates.com/demo/js/kinetic.js"></script>
<script src="http://final-countdown.pragmaticmates.com/jquery.final-countdown.js"></script>
<link rel="stylesheet" href="http://final-countdown.pragmaticmates.com/demo/css/bootstrap.min.css">
<link rel="stylesheet" href="http://final-countdown.pragmaticmates.com/demo/css/demo.css">
<script src="http://fonts.googleapis.com/css?family=Raleway:400,700"></script>
<div class="countdown countdown-container container">
<div class="clock row">
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div><!-- /.text -->
</div><!-- /.inner -->
</div><!-- /.wrap -->
</div><!-- /.clock-item -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas-minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div><!-- /.text...
JavaScript
$(document).ready(function() {
$('.countdown').final_countdown({
'start': 1362139200,
'end': 1388461320,
'now': 1387461319
}, function() {
// Finish Callback
});
});