JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
        <img src="http://via.placeholder.com/150x60" class="logo"></img>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

CSS

.navigation {
    display: flex;
    background: #e24c3c;
    justify-content: flex-end;
    list-style: none;
}

.navigation a {
    display: block;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    flex: 1;
    
}

.navigation .logo{
    float: left;
}

.navigation li:hover {
    background: rgb(212, 135, 19);
}

@media screen and (max-width: 700px) {
    .navigation {
        flex-direction: column;
    }
}

.logo{
   float: left;
}