JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.css">
<div class="clock"></div>
JavaScript
// grab the current date
var currentDate = new Date();
currentDate.setTime(currentDate.getTime() + currentDate.getTimezoneOffset() * 60 * 1000 + 8 * 60 * 60 * 1000);
// set some date in the future (July 4th)
var futureDate = new Date("July 04, 2015 22:00:00");
futureDate.setTime(futureDate.getTime() + futureDate.getTimezoneOffset() * 60 * 1000 + 8 * 60 * 60 * 1000);
// output should be the same no matter what timezone you are in
console.log(currentDate, futureDate);
// calc difference in seconds
var diff = Math.abs(+futureDate - +currentDate) / 1000;
// coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true,
callbacks: {
stop: function () {
alert('Done');
}
}
});