JSFiddle - React, Tailwind, and code Playground

HTML

You should see no artifacts below (resize for testing):

<div>
    <p></p>
</div>

CSS

div {     
    position: relative;         
    width: 400px;     
    height: 400px; 
}  

div p {     
   
    top: 0px;     
    right: 0px;     
    bottom: 0px;     
    left: 0px;      
    background: -o-linear-gradient( -135deg, hsla(195,100%,100%,0.45) 15%, hsla(195,100%,100%,0.25) 95%);     
    background: -moz-linear-gradient( -135deg, hsla(195,100%,100%,0.45) 15%, hsla(195,100%,100%,0.25) 95%);
    background: -webkit-linear-gradient( -135deg, hsla(195,100%,100%,0.45) 15%, hsla(195,100%,100%,0.25) 95%);
    background: -ms-linear-gradient( -135deg, hsla(195,100%,100%,0.45) 15%, hsla(195,100%,100%,0.25) 95%); 
}