JSFiddle - React, Tailwind, and code Playground

by Tejash Soni

HTML

<div class="nav1">
			<ul>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
				<li>four</li>
			</ul>
			<div class="clear"></div>
		</div>
		
		<div class="nav2">
			<ul>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
				<li>four</li>
			</ul>
			<div class="clear"></div>
		</div>

CSS

*{
				margin : 0;
				padding : 0;
			}
			.nav1, .nav2{
				width : 400px;
				margin : 50px auto;
			}
			.nav1 ul, .nav2 ul{
				width : 100%;
				list-style : none;
			}
			.nav1 ul li{
				float : left;
				display : block;
				width : 100px;
				padding : 5px 0;
				background : #F00;
				text-align : center;
				color : #FFF;
			}
			.nav1 ul li:hover{
				background : #0F0;
			}
			
			.nav2 ul li{
				float : left;
				display : block;
				width : 98px;
				padding : 5px 0;
				background : #F00;
				text-align : center;
				color : #FFF;
				border-left : 1px solid #000;
				border-right : 1px solid #000;
			}
			.nav2 ul li:hover{
				background : #0F0;
			}
			.clear{
				clear : both;
			}