JSFiddle - React, Tailwind, and code Playground

by Mohsen Safari Roodbar

HTML

<div class="parent">
  
   <a href="home.html"><div id="home">HOME</div></a>
   <a href="about.html"><div id="about">ABOUT</div></a>
   <a href="contact.html"><div id="contact">GET OFFER</div></a>
   <a href="contact.html"><div id="contact">TESTIMONIALS</div></a>
   <a href="contact.html"><div id="contact">CONTACT</div></a>
    <a href="contact.html"><div id="contact">CONTACT</div></a>
   
  </div>

CSS

.parent {
	width:960px;
    height:300px;
	margin:0 auto;
	display:inline-block;
    background-color:#ccc;
    
}

#home {
	height:40px;
	background-color:#895892;
	text-align:center;
	line-height:40px;
	float:left;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration: none;
}

#about {
	height:40px;
	background-color:#895892;
	text-align:center;
	line-height:40px;
	float:left;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration: none;
}

#contact {
	height:40px;
	background-color:#895892;
	text-align:center;
	line-height:40px;
	float:left;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration: none;
}

#home:hover {
	background-color:#99C;
	box-shadow: inset 0px 10px 20px #895892;
}

#about:hover {
	background-color:#99C;
	box-shadow: inset 0px 10px 20px #895892;
}

#contact:hover {
	background-color:#99C;
	box-shadow: inset 0px 10px 20px #895892;
}

JavaScript

var count = $(".parent a").length;
$(".parent div").width(function(){
    
    return ($(".parent").width()/count)-5;
    
}).css("margin-right","5px");