JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="section">
 <h1 class="title">title</h1>
 
 <div class="graph-container">
   <div class="section-1">
     <div class="section-1-content">
       
     </div>
   </div>
   
  <div class="section-2">
     <div class="section-2-content">
       
     </div>
   </div>
   <div class="section-3">
     <div class="section-3-content">
       
     </div>
   </div>
 </div>
</div>

SCSS

.section {
  padding: 4rem 2rem;
  background: #eee;
  .title {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
}

.graph-container {
  .section-1 {
    height: 200vh;
    position: relative;
    
    &-content {
      height: 80vh;
      background: red;
      position: sticky; 
      top: 0;
    }
  }
  .section-2 {
    height: 200vh;
    padding: 0 2rem;
    position: relative; 
    
    &-content {
      height: 80vh;
      background: blue;
      position: sticky; 
      top: 0;
    }
  }
  .section-3 {
    height: 200vh;
    position: relative;
    padding: 0 3rem;
    
    &-content {
      height: 80vh;
      background: green;
      position: sticky; 
      top: 0;
    }
  }
}