JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="slide">
  <div class="slide-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis dolores, reprehenderit a consequatur quo adipisci optio.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque rerum cumque debitis tempora molestias, nihil dignissimos soluta voluptate exercitationem illum aliquam corporis...

SCSS

p {
  font-size: 18px;
  line-height: 32px;
  font-family: "Manrope", sans-serif;
}

* {
  box-sizing: border-box;
}

.slide {
  height: 100vh;
  overflow: hidden;
  padding: 50px;
  position: relative;
  .slide-content {
    position: absolute;
    top:0; left:0; padding: 50px; width: 100%;
    height: 100%; overflow: auto;
  }
}

.slide:nth-child(1) {
  background: #f9f9f9;
}

.slide:nth-child(3) {
  background: #f9f9f9;
}