JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="obertka">
            <div class="shadow">
                <p>
                     Все счастливые семьи похожи друг на друга,  каждая  несчастливая  семья
                    несчастлива по-своему.
                         Все смешалось в доме Облонских. Жена узнала, что  муж  был  в  связи  с
                    бывшею в их доме француженкою-гувернанткой, и объявила мужу,  что  не  может
                    жить с ним в одном доме.  Положение  это  продолжалось  уже  третий  день  и
                    мучительно чувствовалось и  самими  супругами,  и  всеми  членами  семьи,  и
                    домочадцами. Все члены семьи и домочадцы чувствовали, что нет  смысла  в  их
                    сожительстве и что на каждом постоялом дворе случайно сошедшиеся люди  более
                    связаны между собой, чем они, члены семьи и  домочадцы  Облонских.  Жена  не
                    выходила из своих комнат, мужа третий день не  было  дома. 
                </p>
            </div>
        </div>
</div>

CSS

.shadow{
width:400px;
margin:20px auto;
cursor:text;
box-shadow:inset 0px -190px 190px -50px red;
}

.wrapper{
background:red;
}
.obertka{
width:400px;
position:relative;
z-index:1;
}

p{
color:#000;
position:relative;
z-index:-1;
}