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;
  grid-template-columns: 100px 1fr 1fr;
  grid-template-rows: 100px 200px;
}

/* 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;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}