JSFiddle - React, Tailwind, and code Playground

by ankheg

HTML

<ul id="resorts">
    <li class="country">
        <a href="#">Россия</a>
        <ul>
            <li><a href="#">Кировск</a></li>
            <li><a href="#">Домбай</a></li>
            <li><a href="#">Банное</a></li>
            <li><a href="#">Шерегеш</a></li>
            <li><a href="#">Красная поляна</a></li> 
            <li><a href="#">Бобровый лог</a></li>
            <li><a href="#">Гора Соболиная</a></li>
        </ul>
    </li>
    <li class="country">
        <a href="#">Украина</a>
        <ul>
            <li><a href="#">Буковель</a></li>
            <li><a href="#">Славское</a></li>
        </ul>
    </li>
    <li class="country">
        <a href="#">Швейцария</a>
        <ul>
            <li><a href="#">Саас-Фе</a></li>
            <li><a href="#">Церматт</a></li>
            <li><a href="#">Энгельберг</a></li>
            <li><a href="#">Вербье</a></li>
        </ul>
    </li>
    <li class="country">
        <a href="#">Франция</a>
        <ul>
            <li><a href="#">Тинь</a></li>
            <li><a href="#">Валь-Торанс</a></li>
            <li><a href="#">Шамони</a></li>
            <li><a href="#">Мерибель</a></li>
        </ul>
    </li>
</ul>

CSS

#resorts {
    font-family: arial;
    font-size: 13px; 
    line-height: 150%;
}
ul {
    padding: 0 0 1em 1em;
}
#resorts {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;;   
}
li.country {
    page-break-inside: avoid;   
}