JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="fade">This is random text</div>

CSS

.fade {
    position:relative;
    display:inline-block;
}
.fade:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:30px;
    height:100%;
    
    background: -webkit-gradient(linear, 0 0, 100% 0, 
        from(rgba(255, 255, 255, 0)), 
        to(rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}