JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li class="list-element first">
        <a>Item 1</a>
    </li>
    <li class="list-element">
        <a>Item 2</a>
    </li>
    <li class="list-element">
        <a>Item 3</a>
    </li>
    <li class="list-element">
        <a>Item 4</a>
    </li>
    <li class="list-element">
        <a>Item 5</a>
    </li>
    <li class="list-element last">
        <a>Item 6</a>
    </li>
</ul>

CSS

.list {
    list-style:none;
    margin:0;
    padding:0;
}
.list li {
    width:calc(100%/6);
    float:left;
    
}
.list li a {
    display:block;
    border:1px solid #ddd;
    text-align:center;
}