JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<!-- Wrapper div 1 -->
<div id="wrapperDiv" class="wrapper">
  <div id="wrapperDivTitle" class="wrapperTitle">
    Wrapper Title 1
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 2 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 2
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
   ...

CSS

.wrapper {
  border: 1px solid blue;
  margin-bottom: 15px;
}

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
  
}

.detailDiv {
  border: 1px solid red;
  margin-left: 7px;
  margin-bottom: 5px;
  margin-right: 2px;
}

.detailTitle {
  font-size: 1em;
  font-weight: bold;
  background-color: pink;
  padding: 10px;
  margin-bottom: 5px;
}

.details {
  margin-bottom: 5px;
  margin-left: 5px;
}