JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background:green;margin-bottom:20px; color:#fff;">
    <strong>What I'm aiming for:</strong><br/>
    li's should fall underneath if there is not enougth screen space, but space out at 100% width of screen if there is.
</div>

<strong>CSS Table Example</strong><br/>
(li's stay fixed in one line, but space out correctly)
<ul class="tablecss">
    <li><a href="#">SOMETHING</a></li>
    <li><a href="#">ANOTHER ITEM</a></li>
    <li><a href="#">SOMETHING</a></li>
    <li><a href="#">ITEM NUMBER THREE</a></li>
    <li><a href="#">SOMETHING</a></li>
</ul>

<br/>
<br/>

<strong>Float left Example</strong><br/>
(li's fall underneath, but are not spaced out at 100% width of screen)
<ul class="floatcss">
    <li><a href="#">SOMETHING</a></li>
    <li><a href="#">ANOTHER ITEM</a></li>
    <li><a href="#">SOMETHING</a></li>
    <li><a href="#">ITEM NUMBER THREE</a></li>
    <li><a href="#">SOMETHING</a></li>
</ul>

CSS

.tablecss {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

.tablecss li {
    display:table-cell;

}

ul li a {
    display:block;
    background:red;
    height:50px;
}

ul li:nth-child(2) a,
ul li:nth-child(4) a {
    background:orange;
}




.floatcss {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:center;
}

.floatcss li {
   float:left;
}