JSFiddle - React, Tailwind, and code Playground

by lilalilabp

HTML

<div id="original">
    <div id="faded">
        <p>paragraph1</p>
        <p>paragraph2</p>
        <p>paragraph3</p>
        <p>paragraph4</p>
        <p>paragraph5</p>
        <p>paragraph6</p>
        <p>paragraph7</p>
        <p>paragraph8</p>
        <p>paragraph9</p>
        <p>paragraph10</p>
    </div>
    <div id="wrapper">
    </div>
</div>

CSS

#original{    
    color: #f00;
    padding: 10px;
    position: relative;
    height: 200px;
}
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -300px 200px -200px #fff inset;
}

#faded {
    border: 2px solid #fff;
    padding: 5px;
}