JSFiddle - React, Tailwind, and code Playground

by Bartek Legięć

HTML

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

CSS

.wrapper {
  display: grid;
}

/* This is to make it pretty */

body {
  font: 20px "Noto Serif";
  font-size: 20px; 
}

@media (max-width: 1400px) {
  body {
    font-size: calc(16px + .25vw);
  }
}

.wrapper div {
  background: #2962FF;
  padding: .5em;
  margin: .25em;
  color: #fff;
}