JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="0">
<h2>Überschrift</h2>
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo ligula eget dolor Puuh. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
</p>
</div>

CSS

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}
div {
 margin:10px;
 padding:1em;
 border:1px solid #000;
 -border-radius:5px;
 -box-shadow:0 0 5px #000;
 background:#eef;
 -color:#fff;
 width:300px;
 float:left;
 position:relative;
 overflow:hidden;
}

div p {
 overflow:hidden;
 float:left;
 max-height:4.5em; /*Vorgabehöhe:  1.5em(line-height) x 3 Zeilen = 4.5em */
 min-height:4.5em; 
 font-size:1em;
 line-height:1.5em;
 

}


div:hover p , div:focus p {
 max-height:none;
 height:auto;
}

div:after {
 content:"";
 position:absolute;
 width:10em;
 height:1.5em;
 background-image: linear-gradient(to right, transparent 0%, #eef 70%);
 right:5px;
 bottom:1em;
}


div:hover:after , div:focus:after {
 content:none;
}

h2 {
 margin-bottom:10px;
}