JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<ul class="columns">
    <li>Menu item 1
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 2
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 3
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 4
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 5
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 6
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
    <li>Menu item 7
        <ul id="submenu">
            <li>sub menu item 1</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
            <li>sub menu item etc</li>
        </ul>
    </li>
</ul>

CSS

.columns{

    background:#666;
    color:white;
    
    -webkit-column-count:4;   
       -moz-column-count:4;
        -ms-column-count:4;
         -o-column-count:4;
            column-count:4;
    
    -webkit-column-gap:2em;   
       -moz-column-gap:2em;
        -ms-column-gap:2em;
         -o-column-gap:2em;
            column-gap:2em;
}

.columns,
.columns ul,
.columns li{
    padding:0;
    margin:0;
    list-style:none;
}
.columns > li {font-weight:bold;margin-bottom:5px;}
.columns > li ul{font-weight:normal;}