JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <h1>A website</h1>
    <div class="nav-item">
        <p>Item 1</p>
    </div>
    <div class="nav-item">
        <p>Item 2</p>
    </div>
    <div class="nav-item">
        <p>Item 3</p>
    </div>
</div>

CSS

#nav {
    height: 75px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: fixed;
    background: #000;
    padding: 0;
}    

#nav h1 {
    top: 8px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    font-size: 42px;
    font-family: 'Francois One', Segoe UI, Futura, sans-serif;
    color: rgb(255,255,255);
    display: inline;
}

#nav .nav-item {
    display: inline-block;
    padding: 10px;
    margin: 0;
    background: blue;
}

#nav .nav-item p {
    font-family: 'Francois One', Segoe UI, Futura, sans-serif;
    margin: 0;
}

#nav .nav-item {margin: 0; padding: 0 10px; vertical-align: top;}