JSFiddle - React, Tailwind, and code Playground

by avall

HTML

<div class="container">

<div class="box box1">
BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 BOX1 
</div>
<div class="box box2">
BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 BOX2 
</div>
<div class="box box3">
BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 BOX3 
</div>
<div class="box box4">
BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 BOX4 
</div>
<div class="box box5">
BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 BOX5 
</div>
<div class="box box6">
BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 BOX6 
</div>

</div>

CSS

.container{
    width:600px;
    border:3px solid #ddd;
    overflow:auto;
}

.box{
    margin:20px 0;
    background:#ddd;
    width:200px;   
}
.clear{
    height:10px;
    background:#000;
}
.box1,.box2{
    overflow:visible;
}
.box3,.box4{
    overflow:auto;
}
.box5,.box6{
    overflow:hidden;
}