JSFiddle - React, Tailwind, and code Playground

3-column layout

by tonytlwu

HTML

<section>
  <div class="column"><div class="wrapper">First</div></div>
  <div class="column"><div class="wrapper">Second</div></div>
  <div class="column"><div class="wrapper">Third</div></div>
  <div class="column"><div class="wrapper">Fourth</div></div>
  <div class="column"><div class="wrapper">Fifth</div></div>
  <div class="column"><div class="wrapper">Sixth</div></div>
  <div class="column"><div class="wrapper">Seventh</div></div>
  <div class="column"><div class="wrapper">Eighth</div></div>
</section>

CSS

section {
  margin: 0 -5px;
}

.column {
  float: left;
  width: 33.33%;
}

.wrapper {
  padding: 10px;
  border: 1px solid #000;
  margin: 0 5px 10px 5px;
}