JSFiddle - React, Tailwind, and code Playground

by Madara Uchiha

HTML

<ul class="themenboxen">
    <li> Element 1                
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
            <li><a href="#">Theme 4</a></li>
        </ul>
    </li>
    <li>Element 2 
        <ul>
            <li><a href="#">Theme 1</a></li>
        </ul>
    </li>
    <li>Element 3 
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
            <li><a href="#">Theme 4</a></li>
            <li><a href="#">Theme 5</a></li>
            <li><a href="#">Theme 6</a></li>
            <li><a href="#">Theme 7</a></li>
        </ul>
    </li>
    <li>Element 4
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
            <li><a href="#">Theme 4</a></li>
        </ul>
    </li>
    <li>Element 5
        <ul>
            <li><a href="#">Theme 1</a></li>
        </ul>
    </li>
    <li>Element 6
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
        </ul>
    </li>
    <li>Element 7
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
        </ul>
    </li>
    <li>Element 8
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
            <li><a href="#">Theme 4</a></li>
        </ul>
    </li>
    <li>Element 9 
        <ul>
            <li><a href="#">Theme 1</a></li>
        </ul>
    </li>
    <li>Element 10
        <ul>
            <li><a href="#">Theme 1</a></li>
            <li><a href="#">Theme 2</a></li>
            <li><a href="#">Theme 3</a></li>
            <li><a href="#">Theme 4</a></li>
            <li><a...

CSS

ul.themenboxen, ul.themenboxen ul {
    list-style: none;
    margin-left: 0px;
}

ul.themenboxen li {
    float: left;
    width: 33.3%;
}
ul.themenboxen > li:nth-child(3n+1) {
    clear: both;
}

ul.themenboxen ul li {
    float: none;
    display: inherit;
}