JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="wrapper">
  <div class="brand">
              <img src="https://i.ytimg.com/vi/HPIWXIY2tRE/hqdefault.jpg">
  </div>
  <div class="left">
  ...
  </div>
  <div class="main">
  ...
  </div>
</div>

CSS

.wrapper {
  display : grid;
grid-template-areas: "header header header header"
"content content content content";
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
.wrapper div {
  background: pink;
}
.brand {
grid-area: header;
}
.left {
  grid-area: content;
}