JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="https://www.jqueryscript.net/demo/countdown-timezone/js/countdown.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/flatly/bootstrap.min.css">
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Countdown With Timezone Example</title>
    <style>
        .container { margin: 150px auto; }
        h1 { text-align: center; margin-bottom: 2rem; color: #fff; }
    </style>
</head>

<body><div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/time-clock/countdown-timezone.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"></div>
<div class="jquery-script-clear"></div>
</div>
</div>
    <div class="container">
        <h1>Countdown With Timezone Example</h1>
        <div id="countdown" class="row justify-content-center align-items-center"><div class="col-xs-6 col-sm-3 animated rotateIn" id="days"><div class="wrapper"><span class="time">201</span><span class="label">days</span></div></div><div class="col-xs-6 col-sm-3 animated rotateIn" id="hours"><div class="wrapper"><span class="time">11</span><span class="label">hours</span></div></div><div class="col-xs-6 col-sm-3 animated rotateIn" id="minutes"><div class="wrapper"><span class="time">33</span><span class="label">minutes</span></div></div><div class="col-xs-6 col-sm-3 animated rotateIn" id="seconds"><div class="wrapper"><span class="time">56</span><span class="label">seconds</span></div></div></div>
    </div>



</body></html>

CSS

@import url("https://fonts.googleapis.com/css?family=Lato");
html,
body {
  height: 100%;
  margin: 0;
  font-family: Lato, sans-serif;
  background-color: #000;
}
.wrapper {
  text-align: center;
}
.time {
  color: #fff;
  font-size: 6em;
}
.label {
  font-size: 2em;
  display: block;
  color: #aaa;
}

JavaScript

const cd = new Date().getFullYear() + 1
$('#countdown').countdown({
  year: cd
});