JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content_text" style="max-height:100px">
        <img src="http://un1.adriver.ru/images/0003656/0003656000/0/bn1-canon-4.jpg">
    <p>Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
    <p>Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
    <p>Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
    <p>Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
    <p>Lorem ipsumLorem ipsum Lorem ipsumLorem ipsum</p>
</div>
<div id="shadow"></div>
<a class="read-next" style="display: inline;">Читать далее</a>

<script>
    window.onload = function(){
        blok = document.getElementById('content_text');
        shadow = document.getElementById('shadow');
        parent = blok.parentNode;
        blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
        
        if(blok_height > 80){
            blok.style.maxHeight = '80px';
            link = parent.getElementsByClassName('read-next')[0];
            link.style.display = 'inline'; 

            link.onclick = function(){
                                
                if(blok.style.maxHeight){
                   blok.style.maxHeight = '';
                   shadow.style.display ='none';
                   link.innerHTML = 'Скрыть';
                } else {
                   blok.style.maxHeight = '80px';
                   link.innerHTML = 'Читать далее...'; 
                   shadow.style.display ='block';
                }
                return false;
            } 
        }
    }
</script>

CSS

.read-next {
    color: blue;
    cursor: pointer;
}

#content_text {
    overflow: hidden;
}

#shadow {
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 50px;
    margin: -50px 0px 5px 0;
    position: relative;
}