JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="container">

  <div class="foo">Foo</div>

  <div class="bar">Bar</div>
  
  <div class="tada">Tada</div>

</div>

CSS

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

.foo {
  background-color: #f004;
  grid-column: 2 / 4;
}

.bar {
  background-color: #0f04;
  grid-column: 1 / 3;
}

.tada {
  background-color: #00f4;
  grid-column: 1 / 4;
}