JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<div class="row">
  <div class="col s12 tabSpacer">
    <ul class="tabs chkTabs">
      <div class="connecting-line"></div>
      <div class="chkPacketValidation">
        <i class="fa fa-envelope fa-2x"></i>
      </div>
      <li class="tab col s12" style="display: flex;">
        <a class="chkTabIcon">IP
</a>
        <a class="chkTabIcon" style="margin: 0px auto;">ACL
</a>
        <a class="chkTabIcon" style="float: right;">SG</a>
      </li>
    </ul>
  </div>
  <div style="padding: 0 10px;">
    <div class="col s12 txChkValidation">
      <div class="valInternet" style="border-right: 1px solid rgb(221, 221, 221);"><span>Network:</span> 
        <br><span class="netConnect">Connectivity <i class="fa fa-check netCheckTrue"></i> <i class="fa fa-times netCheckFalse"></i></span>
        <br><span class="netRoute">Routing <i class="fa fa-check netCheckTrueRoute"></i> <i class="fa fa-times netCheckFalseRoute"></i></span>
      </div>
      <div class="valAcl"><span>ACL:</span> 
        <br><span class="aclIngress">Ingress <i class="fa fa-check aclCheckTrue"></i> <i class="fa fa-times aclCheckFalse"></i></span>
        <br><span class="aclEgress">Egress <i class="fa fa-check aclCheckTrueEgress"></i> <i class="fa fa-times aclCheckFalseEgress"></i></span>
      </div>
      <div class="valSg" style="border-left: 1px solid rgb(221, 221, 221);"><span>Security Group:</span> 
        <br><span class="sgIngress">Ingress <i class="fa fa-check secGCheckTrue"></i> <i class="fa fa-times secGCheckFalse"></i></span>
        <br><span class="sgEgress">Egress <i class="fa...

CSS

.row .col {
  padding: 0 10px;
}

.chkTabs .tab a,
.chkTabs li a.active {
  color: #9e9e9e;
}

.chkTabs li a:hover,
.chkTabs li a i:hover {
  color: #9e9e9e !important;
}

.chkTabs {
  background-color: transparent;
  margin: 40px 0 0;
  font-weight: 500;
}

.chkTabs .indicator {
  background-color: transparent;
  display: none;
}

.tabSpacer {
  margin-bottom: 20px;
}

.connecting-line {
  height: 2px;
  background: #9e9e9e;
  position: absolute;
  width: 90%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
}

.chkTabIcon {
  border-radius: 25px;
  border: 2px solid #9e9e9e;
  letter-spacing: 0;
  background-color: #fafafa;
  width: 50px !important;
}

.chkPacketValidation {
  position: absolute;
  left: 0;
  z-index: 1;
  top: 20%;
  right: 0px;
  transition: all 0.6s ease 0s;
  visibility: hidden;
  left: calc(48px);
  margin-top: 0;
}

.txChkValidation {
  display: flex;
  font-weight: 500;
}

.txChkValidation div {
  width: 33.33%;
}

.txChkValidation div:nth-child(2) {
  text-align: center;
}

.txChkValidation div:nth-child(3) {
  text-align: right;
}

.netCheckTrue,
.aclCheckTrue,
.secGCheckTrue,
.netCheckFalse,
.aclCheckFalse,
.secGCheckFalse {
  display: none;
}

.netCheckTrueRoute,
.aclCheckTrueEgress,
.secGCheckTrueEgress,
.netCheckFalseRoute,
.aclCheckFalseEgress,
.secGCheckFalseEgress {
  display: none;
}

JavaScript

function validation() {

  var isNetValidConnect = true,
	  isNetValidRoute = false,
    isAclValidIngress = true,
    isAclValidEgress = true,
    isSgValidIngress = true,
    isSgValidEgress = true;

  if (isNetValidConnect) {

    var netCheckConnect = setInterval(function() {
      $('.chkPacketValidation').css('visibility', 'visible');
      if (isNetValidConnect) {
        $('.netCheckTrue').css('display', 'inline-block');
        $('.valInternet .netConnect').css('color', '#26a69a');
      } else {
        $('.netCheckFalse').css('display', 'inline-block');
        $('.valInternet .netConnect').css('color', '#F44336');
      }
      clearInterval(netCheckConnect);
    }, 2000);

    var aclCheckIngress = setInterval(function() {
      if (isAclValidIngress && isNetValidConnect) {
        $('.chkPacketValidation').css('left', 'calc(50% - 44px)');
        $('.aclCheckTrue').css('display', 'inline-block');
        $('.valAcl .aclIngress').css('color', '#26a69a');
      } else {
        $('.aclCheckFalse').css('display', 'inline-block');
        $('.valAcl .aclIngress').css('color', '#F44336');
        $('.chkPacketValidation').fadeTo("slow", 0, function() {
          $(this).css('left', 'calc(40% - 44px)');
        });
      }
      clearInterval(aclCheckIngress);
    }, 4000);

    var sgCheckIngress = setInterval(function() {
      if (isSgValidIngress && isAclValidIngress && isNetValidConnect) {
        $('.chkPacketValidation').css('left', 'calc(100% - 77px)');
        $('.secGCheckTrue').css('display', 'inline-block');
        $('.valSg .sgIngress').css('color', '#26a69a');
        $('.secGCheckTrueEgress').css('display', 'inline-block');
        $('.valSg .sgEgress').css('color', '#26a69a');
      } else if (isSgValidIngress == true) {
				return false;
      } else {
        $('.secGCheckFalse').css('display', 'inline-block');
        $('.valSg .sgIngress').css('color', '#F44336');
        $('.secGCheckFalseEgress').css('display', 'inline-block');
    ...