JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
  <div class="section">4</div>
  <div class="section">5</div>
  <div class="section">6</div>
  <div class="section">7</div>
  <div class="section">8</div>
  <div class="section">9</div>
  <div class="section">10</div>
  <div class="section">11</div>
  <div class="section">12</div>
	  <div class="section">7</div>
  <div class="section">8</div>
  <div class="section">9</div>


</div>

CSS

.container {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}
.section {
  flex-grow:1;
  margin: 5px;
  height:50px;
  width:calc(100%/6 - 12px);
  border:1px solid black;
  background-color: #EEE;
  border: 1px solid #777;
}