JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<nav class="table">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>

<nav class="table">
<ul>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</nav>

CSS

ul, li, a {
    display:block;
    margin:0;
    padding:0;
}
li {
    float:left;
    width:25%;
}
a {
    text-align:center;
}
a:hover {
    background:yellow;
}

table {
    width:100%;
}

JavaScript

$.each($('nav.table'),function(n,nav){
    var nav = $(nav), mi = $('a',nav), table = $('<table/>').append($('<tr/>'));
    $.each(mi,function(n,a){$('tr',table).append($('<td/>',{html:a}))});
    nav.empty().append(table);
})