JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="navwrapper">
			<ul>
			<li class="single">Home</li>
			<li class="double" id="left">About</li>
			<li class="double" id="right">Contact</li>
			<li class="single">Book</li>
			</ul>
		</div>
		<div id="content">
		</div>
	</body>

CSS

#navwrapper {
width: 40%;
}
ul {
list-style: none;
}
.single {
width: 100%;
font-family: sans-serif;
background-color: #00cc08;
padding: 1%;
text-align: center;
color: white;
display: block;
float: left;
margin-bottom: 5px;
}
.double {
width: 47%;
font-family: sans-serif;
background-color: #00cc08;
text-align: center;
color: white;
display: block;
margin-bottom: 5px;
}
#left {
float: left;
}
#right {
float: right;
}