JSFiddle - React, Tailwind, and code Playground

by James Hooper

HTML

<section class="row-wrp--mod">
  <div class="row row-btm--pdg">
    <div class="sm-24 cols">
      <div class="nd_wrp">
        <div class="nd_inner">
          <div class="lg-12 md-12 sm-24 cols">
            <div class=" nd_text">
              <p>Order NOW to qualify for</p>
              <p>Next day delivery</p>
            </div>
          </div>
          <div class="lg-12 md-12 sm-24 cols">

            		<div class="clockoverlay">
            			<div class="nd_clock">
            				<div class="clock-2" style="margin:2em;"></div>
            			</div>
            		</div>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>

JavaScript

<script defer="" src="//www.screwfix.com/images/general/assets/js/flipclock.js"> </script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var clocks = [];
    var endoftimediff = (new Date().setHours(20,0,0,0) /1000) - (new Date().getTime() /1000);
    /*Clock with HH MM SS*/
    clocks.push($('.clock-2').FlipClock(endoftimediff, {
        clockFace: 'HourCounter',
        countdown: true,
        showSeconds: false,
    }));
});
</script>