JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">

			<div class="menu-div">

				<div class="menu">

					<ul>

						<li>Home</li><li>Contact</li><li>Products</li><li>About us</li>
					
					</ul>

				</div>

			</div>

		</div>

CSS

* {

	margin: 0px;
	padding: 0px;
	background: #421F1F;

}

.top {

	background-image: url(images/logo2.png);
	height: 400px;
	width: 100%;

}

.menu-div {
	
	background-color: #421F1F;
	height: 40px;
	max-height: 40px;
	width: 60%;
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
	border-radius: 5px;
	float: inherit;
	padding-top: 20px;
    position: relative;
    top: 20px;

}

.menu {
	
	text-align: center;
	color: white;

}

.menu ul {

	text-align: center;
	list-style-type: none;
	color: white;
	padding-top: 10px;

}

.menu li {

	display: inline;

}