JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="header">
		<a class="tab" id="tab1"><li>Home</li></a>
		<a class="tab" id="tab2"><li>About</li></a>
		<img src="images/logo.png" id="logo" width="260px" height="95px"/>
		<a class="tab" id="tab3"><li>Menu</li></a>
		<a class="tab" id="tab4"><li>Order</li></a>
		<a class="tab" id="tab5"><li>Cater</li></a>
	</div>
</body>

CSS

li {
    list-style-type: none;
}
.header{
    text-align: center;
    background-color: red;
}
.tab, #logo{
    padding-right: 2.4%;
    padding-left: 2.4%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid black;
}
#tab5{
    margin-top: 10px;
    display: block;
}