JSFiddle - React, Tailwind, and code Playground

by Nikita Panuhin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div class="bg"></div>
  <header>text</header>
  <main>
    <textarea>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia enim quibusdam maiores animi dolor vel nihil et accusantium iure, sint dolore saepe assumenda ipsa libero commodi eum harum labore doloremque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem delectus dolores quasi commodi laudantium similique temporibus voluptates sequi labore quos, ullam facere voluptatibus ad magnam vel praesentium id aliquid totam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt atque voluptatibus porro dignissimos, corporis sunt nobis consectetur nulla modi impedit quis vel expedita eum, nisi est id ducimus quaerat cupiditate.
    </textarea>
  </main>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    text-decoration: none;
    text-align: left;
    font-style: normal;
    z-index: 1;
    font-weight: normal;
    color: #000;
    transform-origin: center center;
}

html {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    position: relative;
    perspective: 3px;
    perspective-origin: 50vw 50%;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;

    background-color: #000;
}

.bg {
    background-image: url(https://img1.akspic.ru/image/20937-canyon-park-peyzash-estestvennaya_arka-josemitskij_nacionalnyj_park-3840x2160.jpg);
    background-size: cover;
    
    position: absolute;
    top: 0;
    transform-origin: 50vw 50%;
    transform: translateZ(-30px) scale(11);
    z-index: 1;
}

header {
    position: absolute;
    top: 0;
    transform-origin: 50vw 50%;
    transform: translateZ(-8px) scale(3.667);
    z-index: 2;
    text-align: center;
    border: 1px solid #000;
    font-size: 5em;
    color: #fff;
}

main {
    position: relative;
    margin-top: 100vh;
    transform-origin: 50vw 50%;
    overflow: hidden;
    background-color: rgba(0, 255, 255, 1);
    z-index: 3;
}

header, main, .bg {
  width: 100%;
  height: 100vh;
}

textarea {
  resize: none;
  height: 100vh;
}