JSFiddle - React, Tailwind, and code Playground

by Kiran m

HTML

<ul class="filter">
    <li><a href="#">A</a>

    </li>
    <li><a href="#">B</a>

    </li>
    <li><a href="#">C</a>

    </li>
    <li class="current"><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>
    <li><a href="#">M</a>

    </li>
    <li><a href="#">N</a>

    </li>
    <li><a href="#">O</a>

    </li>
    <li><a href="#">P</a>

    </li>
    <li><a href="#">Q</a>

    </li>
    <li><a href="#">R</a>

    </li>
    <li><a href="#">S</a>

    </li>
    <li><a href="#">T</a>

    </li>
    <li><a href="#">U</a>

    </li>
    <li><a href="#">V</a>

    </li>
    <li><a href="#">W</a></li><li><a href="#">X</a></li><li><a href="#">Y</a></li><li><a href="#">Z</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;
}