JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class = "navParent">
		<nav>
		<table>
			<tr>
				<td><a class = "navChild" href = billboard.html>Nav 1</a></td>
				<td><a class = "navChild" href = about.html>Nav 2</a></td>
				<td><a class = "navChild" href = locations.html>Nav 3</a></td>
				<td><a class = "navChild" href = pricing.html>Nav 4</a></td>

			</tr>
		<table>
		</nav>
	</div>

CSS

.navParent table{
		color:#ffffff;
		table-layout: fixed;
		text-align:center;
		position:absolute;
		font-size: 20px;
		border: none;
		border-collapse:collapse;
		width:100%;
		}
.navParent table td{
		border-left: 1px solid #000000;
	}
.navParent table td:first-child{
		border-left:none;
	}
.navParent a{
	text-decoration: none;
	color:black;
}
.navChild
{
	width: 100%;
	height: auto;

}
.navChild:hover{
	background-color:#626262;
}