JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="The-Isle-of-Wight.html">The Isle of Wight</a></li>
                <li><a href="Your Stay">Your Stay</a></li>
                <li><a href="Booking">Booking</a></li>
                <li><a href="Contact Us">Contact Us</a></li>
            </ul>
        </div>

CSS

#navbar {
    background-color: #dddddd;
    text-align: center;
    height: 28px;
    max-width: 100%;
    margin: 0 auto;
}

ul#menu li {
    display: inline-block;
}

ul#menu li a {
    background-color: #4d4d4d;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
}