JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<h4>Two items per row:</h4>
<div id="my_div">
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
<a href='#'>Link 4</a>
<a href='#'>Link 5</a>
<a href='#'>Link 6</a>
<a href='#'>Link 7</a>
<a href='#'>Link 8</a>
<a href='#'>Link 9</a>
<a href='#'>Link 10</a>
<div class="cf"></div>
</div>


<h4>Three items per row:</h4>
<div id="my_div2">
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
<a href='#'>Link 4</a>
<a href='#'>Link 5</a>
<a href='#'>Link 6</a>
<a href='#'>Link 7</a>
<a href='#'>Link 8</a>
<a href='#'>Link 9</a>
<a href='#'>Link 10</a>
</div>

CSS

a {
    margin-right: 10px;
}

#my_div a:nth-child(odd) {
   clear: left;
}

#my_div a {
     float: left;
}

#my_div2 a:nth-child(3n+1) {
   clear: left;
}

#my_div2 a {
     float: left;
}


.cf {
    clear: both;
}