JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
  z-index: 3000;
  position: relative;
}

.main:after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);
  z-index: 3001;
  position: absolute;
  bottom: 0;
}