JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<main>
  <header></header>
  <section></section>
</main>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #333;
}

main {
  height: 150vh;
  max-height: 100%;
  overflow-x: hidden;
  perspective: 1.1px;
}

header {
  height: 100vh;
  background: url("https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large");
  background-size: cover;
  background-position: center center;
  transform: translateZ(-1px) scale(2);
}

section {
  min-height: 200vh;
  background: white;
  transform: translateZ(0);
}