JSFiddle - React, Tailwind, and code Playground

by timrwood

HTML

<div class="w">
    <div class="a">
        <div class="b">
            <div class="c">
                <div class="f">A</div>
                <div class="f">A</div>
                <div class="f">A</div>
                <div class="f">A</div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
                <div class="f"></div>
     ...

CSS

.a {
    position: absolute;
    top:100px;
    bottom:100px;
    left:20%;
    right:20%;
    padding-right:20%;
    -webkit-transition: all 500ms ease;
    -webkit-transform-style: flat;
    -webkit-backface-visibility: hidden;
    z-index: 10;
}
.a:hover {
    left:10%;
    right:10%;
    padding-right:30%;
}    
.b {
    position: absolute;
    width:100%;
    top:100px;
    bottom:0;
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling: auto;
}
.c {
    /*height:5000%;*/
    background: #ddd;
    /*overflow:hidden;*/
    padding:10px;
}
.d {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:#999;
}
.w {
    position:relative;
    height:100%;
    overflow:hidden;
}
.f {
    display:block;
    height:50px;
}
.f:nth-child(odd){
    background:#f00;
}
html, body {
    height: 100%;
    overflow: hidden;
}