JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<div class="fx-columns fx-columns-4">
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </div>
  <div class="fx-column">
    <h3>Header</h3>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
    <p>Text paragraph</p>
  </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;
	break-inside: avoid;
  background: pink;
  clear: both;
  margin-bottom: 20px;
}