JSFiddle - React, Tailwind, and code Playground

HTML

<div style="">

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

CSS

body{
padding:0px;
margin:0px;
background:#add7f8;
}

.blog{
position:absolute;
top:5px;
left:5px;
width:150px;
height:16px;
font-family: "Trebuchet MS";
font-size:14px;
color:#333;
display:inline-block;
border:none;
overflow:hidden;
}

.shadow{
width:400px;
margin:20px auto;
cursor:text;
}

.bottom{
box-shadow:inset 0px -190px 190px -50px #add7f8;
}

.top{
box-shadow:inset 0px 190px 190px -50px #add7f8;
}

.left{
box-shadow:inset 190px 0px 190px -50px #add7f8;
}

.right{
box-shadow:inset -190px 0px 190px -50px #add7f8;
}

.text{
color:#000;
position:relative;
z-index:-1;
background:#f9fca3;
}

img{
display:block;
position:relative;
z-index:1;
}