JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="the-magic">
  <div class="wrapper">
    <h1>the magic</h1>
  </div>
</div>

SCSS

body, html { padding: 0; margin: 0 }

.the-magic {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) minmax(320px, 1200px) minmax(30px, 1fr);
}

.wrapper {
  background-color: #f0f4;
  grid-column: 2 / 4;
}