JSFiddle - React, Tailwind, and code Playground

by erikamac

HTML

<div id="main-before">
</div>
<div id="main">
<div id="boxes">
  <div id="one">one</div>
  <div id="two">two</div>
  <div id="three">three</div>
  </div>
</div>
<div id="main-after">
</div>

CSS

#main {
    background: #ccc;
    height: 1000px;
    padding:100px;
}
#boxes {
  height:auto;
  position:relative;
}
#one,#two,#three {
  position:sticky;

}
#one{
  height: 100px;
  background: white;  
}

#two{
  height:40px;
  background: green;
}

#three{
  height:30px;
  background: red; 
}

#main-after, #main-before {
  background: black;
  height: 500px;
}