JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div class="grand-parent">
<div class="parent">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eos architecto at modi sequi maiores animi earum saepe atque, itaque ea dicta inventore ipsam voluptatibus blanditiis expedita qui. Hic, accusantium.</div>
  <div>Cum, provident? Ullam rem tempora quis ab atque voluptates optio aliquid, dolor reiciendis quo, facere alias commodi. Nemo, incidunt maxime reprehenderit magni quas eum dolores ipsam adipisci sequi. Ducimus, nemo.</div>
  <div>Sed maxime at culpa quasi odit vel, a repudiandae dolorem. Placeat voluptas voluptatibus maiores laboriosam fugit vitae expedita hic atque quaerat ea delectus temporibus totam pariatur quia, dignissimos sapiente minima.</div>
  <div>Repudiandae tempora placeat quidem dolorem doloribus ut sint vel? Nisi ipsam est maxime culpa. Fuga nostrum distinctio, deserunt rem, iusto similique saepe pariatur iure! Nostrum magni ex incidunt quis excepturi.</div>
  <div>Officia culpa ducimus numquam maxime cum porro quo aliquam est. Dolorum nam officia obcaecati voluptate a, error pariatur excepturi voluptatum ullam et facilis, laboriosam quod, illo ducimus consequuntur. Ipsa, consequuntur.</div>
  <div>Voluptatem, unde est soluta consectetur, placeat dolorum incidunt, magni minus accusamus eum provident fuga! Ea quaerat tempora dicta facilis velit necessitatibus, beatae quos aperiam praesentium quam dolorem vel. Debitis, voluptate!</div>
  <div>Odio nostrum voluptatem quas, rerum error ab unde ullam odit minima numquam, sed fugit expedita illum incidunt. Itaque aspernatur possimus amet nemo incidunt, culpa nihil quibusdam voluptates quod! Laudantium, qui.</div>
  <div>Exercitationem at magni dolore laudantium magnam ex corporis neque, numquam molestias! Repellendus incidunt ducimus ratione hic ipsa, blanditiis fuga consequuntur quibusdam quisquam distinctio expedita, cupiditate id. Ratione, optio ab magnam?</div>
  <div>Veritatis sit vero mollitia aliquam at blanditiis neque...

CSS

.grand-parent{
  background:lightgreen;
  border:2px solid orange;
  position:relative;
}
div.parent{
  height:300px;
  width:300px;
  margin:0 auto;
  overflow-y:auto;
  border:2px solid gray;
  padding:10px;
}
.footer{
  border:1px solid red;
  padding:10px;
  text-align: center;
  position:fixed;
}

.layer{
  border:1px solid red;
  background:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  position:fixed;
  z-index:10;
  left:0;
  top:0;
  right:0;
  bottom:0;
}