JSFiddle - React, Tailwind, and code Playground

by alexandershustik

HTML

<div class="wrapper">
  <div class="block1">1</div>
  <div class="block2">
    <div class="scroller">
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consectetur nesciunt, iste recusandae rem velit ea provident magnam quasi atque facere, eaque, nobis ex rerum numquam, fuga pariatur accusantium nisi?</span>
      <span>Assumenda deleniti cumque impedit, id at voluptates laudantium, numquam eum distinctio dolores, consequuntur animi accusamus qui magnam hic neque asperiores ea fugiat nobis eos? Accusantium harum nemo laborum voluptatem temporibus!</span>
      <span>Necessitatibus soluta obcaecati expedita est possimus accusamus quaerat ducimus, nesciunt sint, natus veritatis praesentium laudantium quod ratione mollitia quidem recusandae unde rem fugit nemo architecto, modi ipsum alias molestiae. Minus!</span>
      <span>Iusto laudantium dolorum id sed velit dolorem perspiciatis ullam laborum quaerat impedit aliquid cum distinctio tenetur reprehenderit accusantium voluptates doloremque saepe maxime quos, asperiores obcaecati nostrum magni quae quasi cumque.</span>
      <span>Nam dolor facere maiores eveniet, cupiditate tempore reprehenderit dolorum similique, totam placeat debitis libero odio eligendi fugiat laborum earum odit nesciunt. Totam ipsum, at sed consectetur sunt, laborum aperiam harum!</span>
      <span>Voluptate cum, iure mollitia officiis sunt maxime ipsum, error sit praesentium nemo assumenda atque odit beatae veniam fugiat quibusdam nihil rerum culpa excepturi? Sint in neque sapiente, temporibus ea molestias.</span>
      <span>Sequi animi atque in itaque est, tenetur, illum non. Laudantium, et cumque, repellendus autem eum laboriosam optio sint omnis exercitationem, assumenda debitis quasi hic ratione similique est ipsa eius commodi!</span>
      <span>Voluptatibus suscipit incidunt veniam inventore, debitis at commodi possimus est veritatis. Deserunt quas, ea nam vel animi nesciunt impedit id unde, laborum atque...

CSS

html, body{
  margin: 0;
  padding: 0;
}
.wrapper{
  position: relative;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.block1{
  background-color: #2a2;
  height: 40px;
  width: 100%;
}
.block2{
  background-color: #2af;
  width: 100%;
  clear: both;
  margin: auto;
  height: 100%;
}
.scroller{
  overflow: scroll;
}
.scroller p{
  overflow: auto;
  width: 1000px;
}
.block2-1{
  background-color: #9a5;
}
.block3{
  background-color: #23a;
  height: 40px;
  width: 100%;
}