JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="mydiv">
        Lorem ipsum dolor sit amet, sea in iusto everti concludaturque, case debet referrentur in per. Ei consul impedit abhorreant mei. Alterum suscipiantur pro ex. Eu quas mutat cum. Et eum populo invenire petentium, oratio prodesset ad eos, soleat complectitur no cum.
        
        Integre salutatus mea in, id duo veritus admodum insolens. Et eum malis dicit noluisse, probo similique signiferumque pro ei. Antiopam suscipiantur id his. Detracto laboramus suscipiantur at vis.
        
        Vis meis ipsum cu, est ad modus facilis, ut est modus alienum consulatu. Mel ut primis dissentias. Doming omittam necessitatibus eam ei, simul vocibus complectitur at eam. Aliquid dolorem laboramus pri et. Porro utroque facilis ex has, pro eripuit ullamcorper te, an audiam civibus voluptaria mei.
        
        Consul iuvaret te eam. Eu usu modus nonumy nostrud, his ne facilis maiestatis. Nec clita nonumes ea, solet noluisse vix cu. Te vel altera verterem sapientem, quo corrumpit theophrastus ne.
        
        Dicit quidam suavitate nam ex. Eu usu nusquam fierent scripserit. Qui agam commodo id, et sit omnium tritani mediocritatem. Pro ea vero nostro, timeam scripserit eu per.
        
        An sed amet mucius philosophia, quo in iusto maluisset. Eos at aeque fuisset, veri dicam vidisse quo in. Graece timeam quaeque est in. Mel libris fastidii delicatissimi no. Mea te nibh graeco.
        
        Usu verterem erroribus cu, odio doming deleniti at sed. Vix inani quando feugiat eu, pri in commune splendide, sale putant an sed. Cu duo elit omittam patrioque. Modo zril scripserit duo ad. Vocent eripuit voluptaria vix et, in qui porro mollis, per eu falli possim quodsi. Vis commune maluisset vulputate in, cu erant feugiat philosophia pri. Novum dolores praesent at mel.
        
        Quo iusto exerci assentior cu, ius erat velit timeam ea. Te modo offendit consectetuer has, id ius utamur quaerendum. Ut choro neglegentur nec,...

CSS

#wrapper {
    position: relative;
}
#mydiv {
    background: red;
    height: 20em;
    overflow: auto;
    border: 0 solid transparent;
    border-width: 10px 0;
}
#wrapper:before, #wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;    
}
#wrapper:before {
    top: 0;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
    bottom: 0;
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}