JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
    <li> <a href='#'>Tab 1</a>

    </li>
    <li> <a href='#'>Tab 2</a>

    </li>
    <li class="ltab">&nbsp;</li>
</ul>

CSS

.tabs {
    display: table;
    margin: 10px;
    border: 1px solid black;
    list-style-type: none;
    padding: 0;
    width: 500px;
}

.tabs li {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
    padding: 3px;
}

.tabs li.ltab {
    width: 100%;
    background: #ddd;
}