JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

#test {
  border-radius: 15px;
    width: 600px;
    height: 200px;
    box-shadow: 0px 0px 10px black;  

    background: white -moz-linear-gradient(left, 
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );
    background: white -webkit-linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: white -ms-linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: white -o-linear-gradient(left, 
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: white linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );  
    -moz-transition: all 2s;  
    -webkit-transition: all 2s;   
    -ms-transition: all 2s;   
    -o-transition: all 2s;   
    transition: all 2s;
}

#test:hover {
    background: black -moz-linear-gradient(left, 
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
              );
    background: black -webkit-linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: black -ms-linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: black -o-linear-gradient(left, 
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );   
    background: black linear-gradient(left,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 1) 100%
                );  
}