JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<ul class="dictionary-list">
                <li class="dictionary-list__item">
                    <h3 class="webfont">A</h3>
                    <ul class="dictionary-list__links">
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Абсцесс</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Амиотрофия</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Атеросклероз</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Атеросклероз</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link js-popup-text" data-id="1" href="#">Ссылка на всплывайку без картинок</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Атеросклероз</a>
                        </li>
                    </ul>
                </li>
                <li class="dictionary-list__item">
                    <h3 class="webfont">Б</h3>
                    <ul class="dictionary-list__links">
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Баланопостит</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a class="dictionary-list__link" href="#">Бессонница</a>
                        </li>
                        <li class="dictionary-list__links-item">
                            <a...

CSS

.dictionary-list{
	margin-left: 74px;
	padding-top: 74px;
	width: 840px;
    -webkit-columns: 264px 3;
	-webkit-column-gap: 24px;
    -moz-columns: 264px 3;
	-moz-column-gap: 24px;
	columns: 264px 3;
	column-gap: 24px;    
	}
	.dictionary-list__item{
		position: relative;
		display: inline-block;
		padding-bottom: 33px;
		width: 100%;
		vertical-align: top;
		-webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
		}
		.lt-ie10 .dictionary-list__item{
			margin-right: 3%;
			width: 30%;
			}
        .dictionary-list__links{
	        padding-top: 6px;
			width: 216px;
	        }
            .dictionary-list__links-item{
				display: block;
	            padding-bottom: 5px;
	            }
                .dictionary-list__link{
	                display: inline-block;
	                line-height: 1.2;
	                font-size: 1.3em;
	                }