JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi magnam natus deleniti ad tempore omnis ipsam voluptates temporibus enim ratione ea et, hic nostrum. Similique, quaerat labore, assumenda voluptate consequatur reprehenderit hic doloremque temporibus debitis eveniet ipsa voluptas laudantium at autem perspiciatis aspernatur ut. Enim at quia cupiditate dignissimos facilis.</p>
<p>Nisi voluptatem delectus excepturi repudiandae deserunt quis voluptas officia quibusdam ipsam cumque quas repellat, atque facere, fugiat aliquid impedit odit magni ducimus. Nulla ex natus sequi nesciunt, corrupti corporis quia eius amet placeat obcaecati. Vero commodi reiciendis, eaque cum rem odio. Cum beatae, similique non, recusandae aperiam nesciunt doloremque dolores!</p>
<p>Voluptas voluptates veritatis ducimus totam pariatur culpa rem, necessitatibus ipsum modi at voluptatem quo velit eos, excepturi quos, cupiditate earum sit ipsam iusto et? Aspernatur, quae, adipisci excepturi, nulla accusamus ullam tempore molestiae quod, atque dolor ex eum. Voluptas eaque pariatur minima itaque laudantium, maxime fugiat voluptate quidem tenetur illum!</p>
<p>Architecto provident consectetur optio eum, exercitationem fugiat omnis rem cupiditate error hic cumque eos explicabo repellat numquam, sint iusto porro, libero repudiandae quisquam distinctio odio placeat! Quod earum impedit dolores nisi blanditiis ab pariatur ipsum, voluptates, cupiditate dolorem recusandae vero temporibus culpa accusantium voluptate vitae repellat facere numquam debitis inventore.</p>
<p>Nostrum dolorum expedita, laudantium placeat aspernatur vitae! Beatae maxime, exercitationem cumque perspiciatis distinctio odio, vel minus autem mollitia ipsa quam qui. Totam molestias ipsa animi atque exercitationem ad similique a repellat maiores reprehenderit non nobis praesentium, laboriosam et minus aliquid, tempora ipsam cumque, temporibus! Magni provident modi eum, facere eligendi.</p>
<p>Rerum, illum porro...

SCSS

.parallax {
  padding-top: 50%;
  overflow: hidden;
  position: relative;
  clip-path: inset(0);

  &__img {
    position: fixed;
    top: 0;
    bottom: 0;
  }
}