JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<div class="fx-columns fx-columns-4">
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
  <div class="fx-column"><div class="fx-column-inner">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div></div>
</div>

CSS

.fx-columns {
  background: yellow;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
}

.fx-columns-3 {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.fx-columns-4 {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}

.fx-columns .fx-column {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  background: pink;
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.fx-columns .fx-column-inner {}