JSFiddle - React, Tailwind, and code Playground

by Gennady Zemlyakov

HTML

<body>
<header>
    <img class="logo" src="https://placeholdit.imgix.net/~text?txtsize=14&txt=logo&w=150&h=37&txttrack=0">
    <nav>
        <ul>
            <li><span>Personal</span></li>
            <li><span>Business</span></li>
            <li><span>Send</span></li>
            <li><span>Request</span></li>
        </ul>
    </nav>
</header>
</body>

CSS

header {
    background-color: black;/*TODO Remove it*/
    color: white;
}

header {
    height: 76px;
}

header .logo {
    width: 150px;
}

header nav {
    display: inline-block;
    height: 100%;
}

header nav ul {
    border: 2px solid red;/*TODO Remove it*/
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline-block;
    height: 100%;
}