JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<div id="top">
  <div id="middle">
    <div id="bottom">
      <div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
        <div>
          <div class="header">Header</div>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra.</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.header {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

.content {
  min-height: 200px;
}

#bottom {
  padding-bottom: 17px;
  margin-right: -19px; //overflow: scroll;
  //overflow-y: hidden !important;
  box-sizing: border-box !important;
  min-height: 100% !important;
}

#middle {
  padding-right: 19px;
  margin-bottom: -34px; //overflow: scroll;
  //overflow-x: hidden !important;
  min-width: 100% ! important;
  max-height: inherit !important;
  box-sizing: content-box !important;
}

#top {
  display: flex;
  position: relative;
  z-index: 0;
  //overflow: hidden !important;
  max-height: 300px;
  max-width: 300px;
  border: 2px dashed #ec6161;
}