JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SearchForm">
    <ul class="TabControl">
        <li>
            <a href="/search/Funds">Funds (60)</a>
        </li>
        <li>
            <a href="/search/Companies">Companies (4)</a>
        </li>
        <li>
            <a href="/search/Groups">Groups (1)</a>
        </li>
        <li>
            <a href="/search/Categories">Categories (0)</a>
        </li>
        <li>
            <a href="/search/Categories">Identifiers (60)</a>
        </li>
    </ul>
</div>

CSS

#SearchForm {
    width: 62.1em;   
}

#SearchForm ul {
    width: 100%;
    list-style: none;
    padding:0;
    margin: 15px 0 5px 0;
}

#SearchForm li {
    float: left;
    width: 20%;
    
    margin: 12px 0 0 0;
    padding: 6px 0 6px 0;   
}

#SearchForm li a {
    display: block;
    text-align: center;
    margin: 0 6px 0 0;
    padding: 0 20px;
    background-color: #F6E9D8;
}