JSFiddle - React, Tailwind, and code Playground

by Sumit Patel

HTML

<div class="wrapper">
  <div class="holder">
     <div class="parent-container row1" id="row1">
       <div class="header">Header 1</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row1">UP</a></div>
     </div>
     <div class="parent-container row2" id="row2">
       <div class="header">Header 2</div>
       <a href="#">Item 1</a>
       
       <div class="to-top"><a href="#row2">UP</a></div>
     </div>
     <div class="parent-container row3" id="row3">
       <div class="header">Header 3</div>
       <a href="#">Item 1</a>
       <a href="#">Item 1</a>
       
       <div class="to-top" ><a href="#row3">UP</a></div>
     </div>
  </div>
</div>

CSS

.wrapper
{
  height: 500px;
  overflow: auto;
}

.header
{
  background: seagreen;
  color: white;
  padding: 5px;
}

.parent-container
{
  height: 700px;
  padding: 5px;
}

.parent-container > a
{
   display: block;
   padding: 5px;
   margin: 5px;
   background: #eeeeee;
}

.row1
{
  background: lightcyan;  
}

.row2
{
  background: lightblue;  
}

.row3
{
  background: lightgreen;  
}

.to-top
{
  position: relative;
  top: 290px;
  width: auto;
  float: right;
}