JSFiddle - React, Tailwind, and code Playground

by TsarS

HTML

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

<div id="content">
    <div class="group">
     <h3>
А 
</h3>
<p>
  Акушерство и гинекология
</p>
<p>
  Аллергология
</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;
}

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

#content > .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%;
}

#content > .group p {
    margin: 10px;
    padding: 10px;
    background-color: #e7e8e1;
}
#content > .group h3 {
  font-weight:800; }