JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<ul>
    <li id="item-1">Home</li>
    <li id="item-2">Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li>Settings</li>
</ul>

CSS

ul {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

ul li {
    padding: 15px;
    margin: 5px;
    background: #efefef;
    border: 1px solid #ccc;
    display: inline-block;
    list-style: none;  
}
 

#item-1 {
    height: 50px;
}

#item-2 {
    height: 70px;
}