JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <nav>
            <ul class="navigation">
                <li><a href="#">Index</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="search-box">
            <label>
                <input name="search-box" value="Search..."/>
            </label>
        </div>
    </header>

CSS

body {
    background: #f9f9eb;
}

.navigation {
    list-style: none;
    margin: 0;
    background: #0b5eec;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}

    .navigation a {
        text-decoration: none;
        display: block;
        padding: 15px;
        color: white;
    }

        .navigation a:hover {
            background: #000;
            text-decoration: underline;
        }