JSFiddle - React, Tailwind, and code Playground

by sanjeevks121

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body class="overflowH">
<div class="main-wrapper" style="height:1020px;">
  <div class="container-fluid">
    <div class="row custom-row border-bot" style="margin-top:-320px;">
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-"></div>
      <div class="col-md-2 custom-col-md-2"></div>
    </div>
    <div class="row custom-row border-bot">
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2 logo-wrap-main">
        <div class="col-wrap logo-wrap"> Logo </div>
      </div>
      <div class="col-md-2 custom-col-md-2 column-wrapper-main">
        <div class="column-wrapper">
          <div class="column-wrapper-inner">
            <h1>Company at a Glance</h1>
            <p>&nbsp;</p>
            <p>With over 15 years’ experience, the Company Group
              has a proven track record in the telecoms’ industry.</p>
          </div>
        </div>
        <div class="column-wrapper-hov"></div>
      </div>
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2"></div>
    </div>
    <div class="row custom-row border-bot">
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2"></div>
      <div class="col-md-2 custom-col-md-2 column-wrapper-main2">
        <div class="column-wrapper">
          <div class="column-wrapper-inner">
            <h1>Our Group Companies</h1>
            <p>&nbsp;</p>
            <p>Our complete communication management solution has over 14 components to enhance any business operation.</p>
          </div>
        </div>
        <div class="column-wrapper-hov2"></div>
      </div>
      <div...

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900';

/*-------------- Preloader CSS Style begin ---------------*/
html, body{font-family: 'Roboto', sans-serif;}
body{background-color: #ffffff;}
.fix{clear: both; height: 0;}
.logo{margin: 0 0 20px; padding: 0; text-align: center;}
.loader-wrap{position: absolute; top:50%; left: 50%; width: 900px; margin-left: -450px; margin-top: -50px;}
.preloader-wrap {top: 35px; bottom: 0; z-index : 2; position: relative;}
.percentage {text-align:center; color: #fff; line-height: 30px; font-size : 15px; z-index: 3; text-indent: -9999px; background: url(../images/bg-img.jpg) no-repeat 0 0; -webkit-transition: 8s;
  -moz-transition: 8s; -ms-transition: 8s; -o-transition: 8s; transition: 8s;}
.percentage-two{background: url(../images/bg-img.jpg) no-repeat 0 90%; -webkit-transition: 8s; -moz-transition: 8s; -ms-transition: 8s; -o-transition: 8s; transition: 8s;}
.loader,
.percentage{height: 80px;font-weight: 300; position: absolute;  top: 0px;  bottom: 0;  left: 0; right: 0; margin : auto; z-index: 4; overflow: hidden;}
.trackbar {width: 100%; height: 100%; color: #fff; text-align: center; overflow: hidden; position: relative;}
.loadbar {width: 0%; height: 80px;  animation: flicker 5s infinite; overflow: hidden; background-color: #771421;}
.welcome {color: #ffffff; font-family: Roboto; font-size: 38px; left: 20%; margin: 0; position: absolute; text-align: center; top: -20px; z-index: 8;}
@keyframes animation {
  10% {opacity: 0.9;}
  30% {opacity: 0.86;}
  60% {opacity: 0.8;}
  80% {opacity: 0.75;}
}

/*----------------------Global Classes------------------------------*/
.noDisplay{display:none;}


/*----------------------Custom CSS Styles---------------------------*/
.main-wrapper{float:left; width:100%; height:100%; background:url(../images/body-bg.jpg) no-repeat; background-size:cover; background-position:center center; min-height:100%;}
.border-bot{border-bottom:1px solid #000;}
.col-md-2{border-right:...

JavaScript

//--------- process bar animation
var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

var width = 100,
    perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
    time = parseInt((EstimatedTime/1000)%60)*100;
	    
    showText("#msg", "Welcome to the Asergis Group", 0, width); 

// Loadbar Animation
$(".loadbar").animate({
  width: width + "%"
}, time);

// Loadbar Glow Animation
$(".glow").animate({
  width: width + "%"
}, time);

// Percentage Increment Animation
var PercentageID = $("#precent"),
        start = 0,
        end = 100,
        durataion = time;
        animateValue(PercentageID, start, end, durataion);
        
function animateValue(id, start, end, duration) {
  
    var range = end - start,
      current = start,
      increment = end > start? 1 : -1,
      stepTime = Math.abs(Math.floor(duration / range)),
      obj = $(id);
    
    var timer = setInterval(function() {
        current += increment;
        $(obj).text(current + "%");
      //obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

// Fading Out Loadbar on Finised
setTimeout(function(){
  $('.preloader-wrap').fadeOut(300);
  $('.loader-wrap').fadeOut(300);
  $('.main-wrapper').fadeIn(300);
  $('body').addClass('bg');
}, time);

//--------- end process bar animation

$(document).ready(function () {
   //Preloader begin
    $('.preloader-wrap .percentage').addClass('percentage-two');
    $(function(){
		var delays = [4500, 1500, 500, 4500, 1000];
		$('.preloader-wrap...