JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

<h1>Врачам </h1>

<div class="al-list">
    <div class="group">
     <h3>
А 
</h3>
<p>
  <li><a>Акушерство и гинекология</a></li>
</p>
<p>
   <li><a>Аллергология</a></li>
</p>
<h3>
  Г
  </h3>
<p>
  Гастроэнтерология
</p>
<p>
  Гепатология
</p>
<h3>
   Д
   </h3>
<p>
  Дерматология
</p>
<p>
  Диетология
</p>
<h3>
    И
    </h3>
<p>
  Инфекционные заболевания
</p>
<p>
  Исследования и разработки
</p>
<h3>
    К
    </h3>
<p>
  Кардиология
</p>
<h3>
    Н
    </h3>
<p>
  Неврология
</p>
<h3>О</h3>
<p>
  Онкология
</p>
<p>
  Оториноларингология
</p>
<h3>
        П
        </h3>
<p>
  Психология
</p>
<p>
  Пульмонология
</p>
<p>
  Педиатрия
</p>
<p>
  Психиатрия
</p>
<h3>
        Р
        </h3>
<p>
  Ревматология
</p>
<h3>
        С
        </h3>
<p>
  Стоматология
</p>
<h3>
        Т
        </h3>
<p>
  Терапия
</p>
<p>
  Травматология
</p>
<h3>
        У
        </h3>
<p>
  Урология
</p>
<h3>
        Э
        </h3>
<p>
  Эндокринология
</p>
<h3>
        Х
        </h3>
<p>
  Хирургия
</p>
    </div>
    
    
</div>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

.al-list {
   // padding: 10px;
    background-color: #fff;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

.al-list > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #e7e8e1;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

.al-list > .group p   {
    margin: 10px;
    padding: 10px;
    background-color: #e7e8e1;
}
.al-list > .group li {
  list-style:none;
    text-decoration : none;    
}
.al-list > .group h3 {
  font-weight:800; 
  }