JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mb">
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
</ul>

<div class="bloco">
    <div class="col">01</div>
    <div class="col">02</div>
    <div class="col">03</div>
    <div class="col">04</div>
    <div class="col">05</div>
    <div class="col">06</div>
    <div class="col">07</div>
</div>

CSS

ul,
.bloco {
    /* reset */
    margin:0;
    padding:0;
    
    /* estilo */
    list-style:none;
    display:table;
    width:100%;
}

ul li,
.col {
    box-sizing: border-box;
    border:1px dashed #f0f;
    padding:5px 0;
    text-align:center;
    
    /* 
        Se for utilizar responsive, utilize este código com o código do media.
        Se não for utilizar, basta apagar os códigos daqui para baixo
    */
    width:25%; /* ou configure outro valor */
    display:inline-block;
}

@media(min-width:768px) {
    ul li,
    .col {
        width:auto;
        display:table-cell;
    }
}

.mb {
    margin-bottom:20px;
}