JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="filter">
    <li><a href="#">A</a></li
   ><li><a href="#">C</a></li
   ><li><a href="#">D</a></li
   ><li><a href="#">E</a></li
   ><li><a href="#">F</a></li
   ><li><a href="#">G</a></li
   ><li><a href="#">H</a></li
   ><li><a href="#">I</a></li
   ><li><a href="#">J</a></li
   ><li><a href="#">K</a></li
   ><li><a href="#">L</a></li>
</ul>

CSS

* {
    padding:0;
    margin:0;
}
ul.filter {
    display:block;
    background:#ccc;
    border-bottom:1px solid #999;
    margin:0 auto;
    text-align:center;
    padding:0 !important;
}
ul.filter li {
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    list-style: none;
    display:inline-block;
    color: #000;
    padding:0;
    margin:0 !important;
    outline:none;
    white-space:nowrap;
}
ul.filter li a {
    padding: 4px 10px;
    /*float:left;*/
    color: #000;
    display:block;
    border-left:1px solid #999;
    border-right:1px solid #fff;
    text-align:center;
}
ul.filter li.current a, ul.filter li:hover a {
    background: #fff;
    color: #862A1F !important;
}