JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a href="#">
   This is some clickable Text 
</a>
</div>

CSS

div {
    position:relative;
    width:250px;
    overflow:hidden;
}
a {
    white-space:nowrap;
    font-family:Verdana;
    text-transform:capitalize;
    color:#000;
    font-size:30px;
    display:inline-block;
    text-decoration:none;
}
a:after {
    content:" ";
    display:block;
    position:absolute;
    z-index:1;
    right:0;
    height:100%;
    width:150px;
    top:0;
    background:#fff;
     background: -webkit-gradient(linear, 0 0, 100% 0, 
        from(rgba(255, 255, 255, 0)), 
        to(rgba(255, 255, 255, 1)));
}