JSFiddle - React, Tailwind, and code Playground

by ixartz

HTML

<div class="lexique">
    <div class="set">
        <h3 class="letter">A</h3>
        <ul class="word">
            <li><a href="">Analyse stratégique</a></li>
            <li><a href="">Asymétrie (conflit)</a></li>
            <li><a href="">Attaque Informationelle</a></li>
            <li><a href="">Attaque informationnelle</a></li>
        </ul>
    </div>

    <div class="set">
        <h3 class="letter">B</h3>
        <ul class="word">
            <li><a href="">Benchmarking</a></li>
            <li><a href="">Biais Cognitif</a></li>
        </ul>
    </div>

    <div class="set">
        <h3 class="letter">C</h3>
        <ul class="word">
            <li><a href="">Capital immatériel</a></li>
            <li><a href="">Cartographie</a></li>
            <li><a href="">Communication (versus information)</a></li>
            <li><a href="">Compétitivité</a></li>
            <li><a href="">Coopétition</a></li>
            <li><a href="">Crise</a></li>
            <li><a href="">Culture stratégique</a></li>
            <li><a href="">Cycle de l&#039;information</a></li>
        </ul>
    </div>

    <div class="set">
        <h3 class="letter">D</h3>
        <ul class="word">
            <li><a href="">Désinformation</a></li>
            <li><a href="">Déstabilisation (stratégie de)</a></li>
            <li><a href="">Diplomatie</a></li>
            <li><a href="">Dissuasion (par l&#039;information)</a></li>
            <li><a href="">Due Diligence</a></li>
        </ul>
    </div>

    <div class="set">
        <h3 class="letter">E</h3>
        <ul class="word">
            <li><a href="">Echiquiers (système des)</a></li>
            <li><a href="">Elicitation</a></li>
            <li><a href="">Etat stratège</a></li>
            <li><a href="">Ethique</a></li>
        </ul>
    </div>

    <div class="set">
        <h3 class="letter">F</h3>
        <ul class="word">
            <li><a href="">Firme multinationale</a></li>
        </ul>
    </div>

    <div...

CSS

div.lexique
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-rule: 1px dotted #ccc;
    -moz-column-rule: 1px dotted #ccc;
    -o-column-rule: 1px dotted #ccc;
    -ms-column-rule: 1px dotted #ccc;
    column-rule: 1px dotted #ccc;
}

@media screen and (max-width: 768px) {
  div.lexique
  {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
  }
}

@media screen and (max-width: 480px) {
  div.lexique
  {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -o-column-count: 1;
    -ms-column-count: 1;
    column-count: 1;
    -webkit-column-rule: none;
    -moz-column-rule: none;
    -o-column-rule: none;
    -ms-column-rule: none;
    column-rule: none;
  }
}

div.set
{
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
}

h3.letter
{
    color: #748094;
    text-align: center;
}

ul
{
    list-style-type: none;
    padding-left: 15px;
}

ul li
{
    margin: 3px 0;
}

a, a:visited
{
    color: #6380a6;
}

a:hover
{
    color: #2e4159;
}