JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="block-menu ">
    <a class="block-menu-item logo gray" href="/"></a>
    <a class="block-menu-item">Button 1</a>
    <a class="block-menu-item">Button 2</a>
    <a class="block-menu-item">Button 3</a>
    <div id="block-menu-bar-button">
    <a class="block-menu-item">Button 4</a>
    <a class="block-menu-item">Button 5</a>
</div>
</div>

CSS

#block-menu-bar-button{
     float:right; 
     display:inline-block; 
     overflow:hidden;
}
.block-menu{
     position:relative; 
     width:70%; 
     text-align:left; 
     margin:auto; 
     padding:15px 0;
    
    background-color:red;
}
a.block-menu-item, div.block-menu-item{
     background-color:aqua;
     display:inline-block; 
     margin:0 0px; 
     padding:2px 0;
     border-bottom: 2px solid transparent;
     cursor:pointer;
}