JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div id="container">
    <p>1dffsfdfg gdf gfg dgdf fdf gfg dfgdfgd</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1 fdgd gfdgdf fg gdf gdfgdfgd gdf gdfg dfg d g</p>
    <p>1</p>
    <p>1</p>
</div>

SCSS

div#container {
    $shadow_width:30%;
    $shadow_cover_width:$shadow_width*5/4;
    $shadow_thickness: 30px;
    $shadow_cover_thickness: $shadow_thickness*5/4;
    border: dotted 1px blue;
    width:500px;
    height:100px;
    overflow-y: scroll;
    background:
    /* Shadow covers */
    -webkit-radial-gradient(center top, $shadow_cover_width $shadow_cover_thickness, yellow 70%, rgba(0, 0, 0, 0)), 
        -webkit-radial-gradient(center bottom, $shadow_cover_width $shadow_cover_thickness, white 70%, rgba(0, 0, 0, 0)) 0 100%,
    /* Shadows */
    -webkit-radial-gradient(center top, $shadow_width $shadow_thickness, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
        -webkit-radial-gradient(center bottom, $shadow_width $shadow_thickness, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}