JSFiddle - React, Tailwind, and code Playground

HTML

<div class='line-clamp'>dfgodgsdgksdjlfhgkjsdfhggjfk djfgkdsfjhgk dksfjghhjkfd skdfjghksdjfgh ljksdfg lskdfgh jksdflgh skdjfg skjdfghlkjdsfgh sldjkfgh kjdsfgh sdkjfgh ksdjfgh sdfjklgh ksdjfgh skdjfgh ksdjgh ksdjhg kjsdhfkghsdkfgh sdkfjgh sdfkjgh sdkjfgh sdkfjgh sdfkjgh skdfjlgh sdkjgh skdfjh gskdjfhgksjdfh gksdjfhgksjdfgkjsdf jg dskj faskdjfh kajlsdfh kjasdfk hkasdjfh ksadjfh kasjdfh kjasdfh kjsadhf kjasdh fkjasdhf kjasdf kjasdf jkasdhklf hsadkjfh kasdjfhkjasdf kjasdf kjasd fhjkasdfh kajsdf kjasdf kjadsfhkasjdfhkajsdfhasdkjfh aksdjfhkjasdhf kjasd </div>

CSS

.size {

}

.line-clamp {
      position: relative;
      height: 2.4em;
      overflow: hidden;
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 1.2em;
      background: linear-gradient(to right, rgba(230, 230, 230, 0), rgba(230, 230, 230, 1) 60%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        height: auto;
    }
    
    .line-clamp:after {
        display: none;
    }
}



.tile h3 {
    font-size: 10pt;
    font-weight: normal;
}