JSFiddle - React, Tailwind, and code Playground

HTML

<section ng-app>
		<ul ng-init="tab = 1">
			<li ng-class="{active:tab===1}"> 
				<a  ng-click="tab = 1">What you eat?</a>	
			</li>
			<li ng-class="{active:tab===2}"> 
				<a  ng-click="tab = 2">Favorite juice?</a> 
			</li>
			<li ng-class="{active:tab===3}"> 
				<a  ng-click="tab = 3">Do you close your eyes?</a> 
			</li>
			<br><br>
			<p ng-show="tab === 1"> I eat chocolates, alive! </p>
			<p ng-show="tab === 2"> I drink pulpy orange juice, mango milk shake... </p>
			<p ng-show="tab === 3"> yeah, I sleep at weekend. I am human... :D</p>
		</ul>		
	</section>

CSS

p {
		font-size: 22px;
		font-weight: bold;
		font-style: italic;
		color: rgb(62, 62, 62);
		margin: 18px;
	}
	ul {
		float: left;
		border-radius: 5px;
		border: solid 1px rgb(198, 198, 198);
		padding: 7px 11px;
		background-color: rgb(248,248,248);
	}
	li {
		float: left;
		background-color: rgb(200,200,200);
		padding: 5px 19px;
		margin: 5px 2px 5px 0px;
		color: black;
		list-style: none;
	}
	li:hover, li:hover a {
		background-color: rgb(6,179,6);
		color:white;
	}
	li a {
		text-decoration: none;
		color: white;
		font-size: 21px;
		font-style: italic;
		text-shadow: 1px 0px 3px rgb(157, 157, 157);
	}
	li:nth-child(1) { border-radius: 4px 0px 0px 4px; margin-left: 1px;}
	li:nth-child(3) { border-radius: 0px 4px 4px 0px;}
	.active {
		background-color: rgb(6,179,6);
	}