JSFiddle - React, Tailwind, and code Playground

by Stalinraj J

HTML

<div class="columns">
  <div class="columns-item">
    1
  </div>
  <div class="columns-item">
    2
  </div>
  <div class="columns-item">
    3
  </div>
  <div class="columns-item">
    4
  </div>
  <div class="columns-item">
    5
  </div>
  <div class="columns-item">
    6
  </div>
  <div class="columns-item">
    7
  </div>
  <div class="columns-item">
    8
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.columns {
   -moz-column-width: 6em;
 -webkit-column-width: 6em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
}

.columns-item {
  display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}