JSFiddle - React, Tailwind, and code Playground

HTML

<title>Page With tab and navigation</title>
		<!-- <link rel="stylesheet" href="jquery-ui.min.css"> -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="jquery-ui.min.js"></script>
		<script type="text/javascript" src="tab.js"></script>


	<body>
		<div class="nav">
		</div>
		<div id="tabs">
			<ul>
				<li><span><a href="#tabs-1">AGENDA</a></span></li>
				<li><span><a href="#tabs-2">SPEAKERS</a></span></li>
				<li><span><a href="#tabs-3">GUIDE</a></span></li>
			</ul>
			<div id="tabs-1">
    			<p>Count on me</p>
  			</div>

  			<div id="tabs-2">
    			<p>Like one two three</p>
			</div>
  			<div id="tabs-3">
    			<p>Ill be there</p>
    		</div>
		</div>

CSS

#tabs{
	width:50%;
}
#tabs li{
	display: inline-block;
    text-align: center;
    width: 30%;
	background-color: rgb(240,240,240);
	border-style: solid;
/*	padding:1.6635859% 10% 1.6635859% 10%;*/
}
#tabs li span{
	width:100%;
}
#tabs ul{
	padding-left: 0;
	margin-left: 0;
}

#tabs li:hover{
	background-color: rgb(255,255,255);
}