JSFiddle - React, Tailwind, and code Playground

by dsheiko

HTML

<article class="article">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu lorem malesuada, feugiat lorem ut, placerat purus. Curabitur sem risus, suscipit ultrices suscipit in, elementum sit amet lorem. Cras volutpat rhoncus nibh, mollis pharetra ipsum semper eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu odio neque. Nullam ut metus commodo est porta vulputate at quis arcu. Donec sed facilisis dolor. Sed viverra blandit sagittis. Suspendisse ullamcorper sem a placerat tincidunt.</p>
    <p>Pellentesque a auctor massa. Donec in convallis neque. Praesent in eros ut purus semper commodo in pharetra purus. Nulla facilisi. Cras accumsan ipsum ac pharetra faucibus. Quisque commodo felis eu mattis vehicula. Nam tincidunt hendrerit risus in ornare. Mauris eu nisl fringilla, pretium mi in, aliquet lacus. </p>
  </article>

CSS

.article {
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

@media (max-width : 1024px) {
  .article {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}
@media (max-width : 800px) {
  .article {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}