JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<div class="container">
  <div>
    <h2 class="heading-wrapper">
      Heading
    </h2>
  </div>
  <div class="content">
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
    <p>List</p>
  </div>
</div>

CSS

.container  {
  position: absolute;
  background-color: #ccc;
  height: 250px;
  width: 200px;
}

.heading-wrapper {
  background: #666;
  color: #fff;
  position: absolute;
  width: 100%;
  margin: 0 auto;
}
.content {
    color: #fff;
    bottom: 58px;
    position: absolute;
    top: 39px;
    overflow-y: auto;
    background: #363636;
    z-index: 3;
    width: 100%;
}