JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


    
    <div class="wide-box-holder col-sm-12 our-values about-page">
    <div class="container">
    <h2>OUR Values &amp; Culture</h2>
    <p>US Technomatrix has earned an unwavering reputation for itself by maintaining high customer retention ratio. This can directly be attributed to the core values that are at the very heart of the organization. Since inception the company has intrepidly remained committed to each and every one of them and to this day these values are: </p>

<div class="clearfix"></div>


<!-- Nav tabs -->
<ul role="tablist" class="nav nav-tabs">
  <li>
    <div class="hover"><img alt="" src="images/abt-icon1-hover.png"></div>
	<a data-toggle="tab" role="tab" href="#tab1"> <span aria-hidden="true" class="glyphicon glyphicon-asterisk"></span> </a>
    <h4>ion 1</h4>
  </li>
  <li>
  	<div class="hover"><img alt="" src="images/abt-icon2-hover.png"></div>
	<a data-toggle="tab" role="tab" href="#tab2"> <img alt="" src="images/abt-icon2.png"> </a>
    <h4>ion 2</h4>
    </li>
  <li class="active">
  	<div class="hover"><img alt="" src="images/abt-icon3-hover.png"></div>
	<a data-toggle="tab" role="tab" href="#tab3"> <img alt="" src="images/abt-icon3.png"> </a>
    <h4>ion 3</h4>
    </li>
  <li>
  	<div class="hover"><img alt="" src="images/abt-icon4-hover.png"></div>
	<a data-toggle="tab" role="tab" href="#tab4">  <img alt="" src="images/abt-icon4.png"> </a>
    <h4>ion 4</h4>
    </li>
  <li>
    <div class="hover"><img alt="" src="images/abt-icon5-hover.png"></div>
	<a data-toggle="tab" role="tab" href="#tab5">  <img alt="" src="images/abt-icon5.png"> </a>
    <h4>ion 5</h4>
    </li>
</ul>
<hr>
<div class="clearfix"></div>

<!-- Tab panes -->
<div class="tab-content">
  <div id="tab1" class="tab-pane">
  	<h4>Innovation And Exploration 1</h4>
  	<p>Two of the most essential ingredients which have...

CSS

.nav-tabs li {
    border: 1px solid #000;
    margin: 0 1%;
    padding: 10px;
    width: 18%;
}

.nav-tabs li.active {
   background-color: #39c;
    }

JavaScript

//About Pages Ovals move to center on click
    jQuery(document).ready(function(){
      $(".nav-tabs li").click(function() {
        $(".nav-tabs li.active").removeClass("c_active"); //Remove any "active" class
//        $(".nav-tabs li.active > div").css("display","block");
	    var $active = $(this).detach().addClass("c_active"),
            $lis = $(".nav-tabs li");
        $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
      });
	  
    });