JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<link rel="stylesheet" href="https://use.fontawesome.com/f7a386584d.css">

CSS

.countdown-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  padding-top: 0;
  width: auto;
  max-width: 890px;
  min-height: 670px;
  margin: 20px auto;
  background: url(https://cdn2.hubspot.net/hubfs/1151181/Assets_August_2017/popup-bg.svg) no-repeat;
  background-position: top center;
  background-size: cover;
}

.countdown-popup .header-red {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  border-radius: 0px;
  background-color: #FF2E63;
  display: table;
}

.countdown-popup .header-red span {
  color: #FFFFFF;
  font-family: "Futura PT";
  font-size: 35px;
  font-weight: 900;
  line-height: 39px;
  text-align: center;
  display: table-cell;
  margin: 0 auto;
  vertical-align: middle;
}

.countdown-popup .popup-content {
  text-align: center;
  position: relative;
  top: 145px;
}

.countdown-popup .popup-content h2 {
  color: #000000;
  font-family: "Futura PT";
  font-size: 27px;
  font-weight: 300;
  line-height: 39px;
  text-align: center;
}

.countdown-popup .popup-content h1 {
  width: 512px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 27px;
  font-weight: 900;
  line-height: 39px;
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
}

.countdown-popup .popup-content #demo {
  color: #000000;
  font-family: "Futura PT";
  font-size: 56px;
  font-weight: 300;
  line-height: 56px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 25px;
}

.countdown-popup .popup-content span {
  opacity: 0.5;
  color: #000000;
  font-family: "Futura PT";
  font-size: 14.4px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
  padding: 15px;
}

.countdown-popup .popup-content .icon {
  margin-top: 26px;
  padding-bottom: 10px;
}

.countdown-popup .popup-content .sub-headers {
  margin-bottom: 25px;
}

.countdown-popup .popup-content .sub-headers p {
  color: #000000;
  font-family: "Futura PT";
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  text-align: center;
 ...

JavaScript

$.magnificPopup.open({
  items: {
    src: '<div class="countdown-popup"><div class="header-red"><span>WAIT!</span></div><div class="popup-content"><h2>Want Credit Repair Cloud  <u>FREE</u> for 6 months?</h2><h1>Join our free online training to learn how</h1><p id="demo"></p><span>MINUTES</span><span>SECONDS</span><div class="icon"><img src="https://www.creditrepaircloud.com/hs-fs/hubfs/Assets_August_2017/daniel-pict.png?t=1515701799484&width=91&name=daniel-pict.png"></div><div class="sub-headers"><p>How to Quickly Start a Profitable</p><p>Credit Repair Business</p></div><div><a href="www.w.creditrepaircloud.com/free-training"><i class="fa fa-arrow-right" aria-hidden="true"></i> RESERVE MY SPOT NOW! </a></div></div></div>', // can be a HTML string, jQuery object, or CSS selector
    type: 'inline'
  }
});


function startCountDown() {
  
    
  // Set the date we're counting down to
  var d = new Date();
  var currentMin = d.getMinutes();
  var currentSec = d.getSeconds();
  if(currentMin > 0 && currentMin < 15)
  {
  currentMin = (14 - currentMin) * 60000;
  currentSec = (60 - currentSec) * 1000;
  }
  else if(currentMin >= 15 && currentMin < 30){
    currentMin = (29 - currentMin) * 60000;
    currentSec = (60 - currentSec) * 1000;
  }
  else if(currentMin >= 30 && currentMin < 45){
    currentMin = (44 - currentMin) * 60000;
  currentSec = (60 - currentSec) * 1000;
  }
  else{
  currentMin = (59 - currentMin) * 60000;
  currentSec = (60 - currentSec) * 1000;
  }
 
  
  var timeLeft = currentMin + currentSec;
  var countDownDate = new Date().getTime() + (timeLeft);


  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours =...