JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<header>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</header>

SCSS

header {
  aspect-ratio: 2/1;
  width: 100vw;
  box-shadow: 0 0 0 1px red;
  position: relative;
  perspective: 10vw;
}
div {
  box-shadow: 0 0 0 1px blue;
  background: rgba(0,0,255,.2);
  position: absolute;
}
div:nth-child(1n) {
  width: 70%;
  height: 100%;
  transform: rotateY(45deg);
  transform-origin: left;
}
div:nth-child(2n) {
  width: 70%;
  height: 100%;
  transform: rotateY(-45deg);
  transform-origin: right;
  right: 0;
}