JSFiddle - React, Tailwind, and code Playground

HTML

<div id="black-bar">
    <a href="..." class="logo"><img src="..." style="height: 100px;"></img></a>
    
    <ul>
        <li><a href="programs.shtml">Programs & Projects</a></li>
        <li><a href="recipes.shtml">Recipes</a></li>
    </ul>
</div>
jhjsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

CSS

#black-bar {
    text-align: left;
    background: #373737;
    height: 43px;
    padding-left: 60px;
    width: 100%;
    line-height: 119px;
}
#black-bar .logo {
    float: left;
    margin-left: 0px;
}
/* header menu */
 #black-bar ul {
    display: inline;
}
#black-bar ul li {
    display: inline;
}

#black-bar ul li a {
    vertical-align: top;
    line-height: 40px;
    color: white;
    text-decoration: none;
}