JSFiddle - React, Tailwind, and code Playground

by Dinesh chhabra

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="tabs--centered" id="tabUl">
   <ul >
       <li><a href="#">Two Piece Suit </a></li>
       <li ><a href="#">Three Piece Suit </a></li>
       <li><a href="#">Shirts</a></li>
       <li><a href="#">Blazers</a></li>
       <li><a href="#">pants</a></li>
       <li><a href="#">Vests</a></li>
       <li><a href="#">Tuxedos</a></li>
       <li><a href="#">Overcoats</a></li>
       <li><a href="#">Shirts</a></li>
       <li  ><a href="#">Blazers</a></li>
       <li><a href="#">pants</a></li>
       <li><a href="#">Vests</a></li>
       <li ><a href="#">Tuxedos</a></li>
       <li class="is--active"><a href="#">Overcoats</a></li>
       <li><a href="#">pants</a></li>
       <li><a href="#">Vests</a></li>
       <li><a href="#">Tuxedos</a></li>
       <li><a href="#">Overcoats</a></li>
       <li ><a href="#">Shirts</a></li>
       <li><a href="#">Blazers</a></li>
       <li><a href="#">pants</a></li>
       <li><a href="#">Vests</a></li>
       <li><a href="#">Tuxedos</a></li>
       <li ><a href="#">Overcoats</a></li>
   </ul>
   
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

CSS

body{margin: 0; padding: 0;}
   .tabs--centered {white-space: nowrap;overflow-x: scroll;width: 80%;margin:auto}
   .tabs--centered ul{padding:0;}
   .tabs--centered li {display: inline-block;vertical-align: top;}
   .tabs--centered li a {text-decoration: none; color: #999;display: block;height: 70px;line-height: 70px;padding: 0 20px;text-transform: uppercase;}
   .tabs--centered li.is--active a {background: #f2f2f2;color: #000;font-weight: 600;}

JavaScript

$(document).ready(function(){
	moveToTargetDiv('li.is--active','#tabUl');
	$('#tabUl li').click(function(){
		$('#tabUl li').removeClass('is--active');
		$(this).addClass('is--active');
		moveToTargetDiv('li.is--active','#tabUl');
	});
});
function moveToTargetDiv(target, outer){
	var out = $(outer);
	var tar = $(target);
	var x = out.width();
	var y = tar.outerWidth(true);
	var z = tar.index();
	var q = 0;
	var m = out.find('li');
	
	for(var i = 0; i < z; i++){
		q+= $(m[i]).outerWidth(true)+4;
	}
	
	$('#tabUl').animate({
		scrollLeft: Math.max(0, q )
	}, 800);
	return false;
}