JSFiddle - React, Tailwind, and code Playground

HTML

<div class="waterMark gradient">

<p>SOME NAME</p>

</div>

CSS

.waterMark
{
background-color:Red;    
float: right;    
opacity: 0.6;
position: absolute;
width: 80%;
z-index: 999;
border:solid 1px black;

}
.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, center center, left center, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }