JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
        <li class="active end"><a href="#">Home</a></li>
        <li><a href="#">Our Services</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Get A Quote</a></li>
        <li><a href="#">Drive For Us</a></li>
        <li><a href="#">Terms & Conditions</a></li>
        <li class="end"><a href="#">Contact Us</a></li>

    </ul>

CSS

/* CSS MENU */

        #menu {
        /* DISPLAY SETTINGS */
            height: auto;
            width: 825px;
            float: left;
            

            padding-left: 10px;
            padding-right: 10px;    
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;    
        /* APPEARANCE SETTINGS */
            border-top: 2px solid #356AA0;
            border-left: 2px solid #356AA0;
            border-bottom: 2px solid #204061;
            border-right: 2px solid #204061;
            background: #628ddb;
        /* FONT SETTINGS */
            color: #15387a;
            font-family: Arial, sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 12px;    
        }
        /* LIST SETTINGS */
        #menu li {
            display: inline-block;
        }
        /* HYPERLINK SETTINGS */
        #menu li a {
            text-decoration: none;
            display: block;
            padding: 0 15px;
            line-height: 40px;
        }
        /* HOVER AND ACTIVE BUTTON SETTINGS */
        #menu li a:hover, #menu li.active a {
        color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
        }