JSFiddle - React, Tailwind, and code Playground

by Adhik Bagul

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">

<p style="text-transform: uppercase; font-size: 20px;">ICO Start in:</p>
		<div class = "tming">
			<ul id="timer">
			  <li><span class="days">00</span> Days</li>
			  <li><span class="hours">00</span> Hours</li>
			  <li><span class="minutes">00</span> Minutes</li>
			  <li><span class="seconds">00</span> Seconds</li>
			</ul>
		</div>

CSS

/* jsfiddle hack */

			/* Font CSS */
			body { 
				font-family: 'Roboto', san-serif;
				font-size: 12px;
			}

			p {
			  text-align:center;
			}

			ul {
				
				padding-left: 29%;
			  display:table;
			}

			li {
			  color: #fff;
				display: table-cell;
				padding: 40px 26px;
				/*width: 25%;*/
				text-align: center;
				background: #000;
				font-size: 20px;
				font-weight: 600;
			}

			span {
			  font-size: 48px;
			display: block;
			background: #38610B;
			margin-bottom: 15px;
			padding: 19px 30px;
			color: #fff;
			}

			.bg {
			  position:fixed;
			  /* background:url("https://2.bp.blogspot.com/-LIUhUylLKyg/UrttOkxR4VI/AAAAAAAAAFg/ve-zJ8MzXGQ/s1600/kjb.jpg") center center; */
			  
			  top:0;
			  right:0;
			  bottom:0;
			  left:0;
			  background-size:cover;
			  z-index:-1;
			}

JavaScript

var deadline = '05/13/2018';

			function getTimeRemaining(endtime){
				var t = Date.parse(endtime) - Date.parse(new Date());
			  var seconds = Math.floor( (t/1000) % 60 );
			  var minutes = Math.floor( (t/1000/60) % 60 );
			  var hours = Math.floor( (t/(1000*60*60)) % 24 );
			  var days = Math.floor( t/(1000*60*60*24) );
			  return {
			  'total': t,
			  'days': days,
			  'hours': hours,
			  'minutes': minutes,
			  'seconds': seconds
			  }
			}

			function initTime(identifier, endtime){
				var timer = document.getElementById('timer');
			  var daySpan = timer.querySelector('.days');
			  var hourSpan = timer.querySelector('.hours');
			  var minuteSpan = timer.querySelector('.minutes');
			  var secondSpan = timer.querySelector('.seconds');
			  var timeInterval = setInterval(function(){
				var t = getTimeRemaining(endtime);
				daySpan.innerHTML = t.days;
				hourSpan.innerHTML = t.hours;
				minuteSpan.innerHTML = t.minutes;
				secondSpan.innerHTML = ('0' + t.seconds).slice(-2);
					if(t.total<=0){
					clearInterval(timeInterval);
				}
			  }, 1000);
			}

			initTime('timer', deadline);