JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    height: 100px; 
    margin: 100px 20px; 
    border: 1px solid black;
    background: white -webkit-linear-gradient(left, rgb(112, 0, 112) 0%, white 50%, white 50%, white 100%);   
    background: white -moz-linear-gradient(left, rgb(112, 0, 112) 0%, white 50%, white 50%, white 100%);   
    background: white -ms-linear-gradient(left, rgb(112, 0, 112) 0%, white 50%, white 50%, white 100%);   
    background: white -o-linear-gradient(left, rgb(112, 0, 112) 0%, white 50%, white 50%, white 100%);   
    background: white linear-gradient(left, rgb(112, 0, 112) 0%, white 50%, white 50%, white 100%);  
    background-size: 200% 100%;   
    -webkit-transition: all 1s linear;   
    -moz-transition: all 1s linear;   
    -ms-transition: all 1s linear;   
    -o-transition: all 1s linear;   
    transition: all 1s linear; } 
div:hover {   background-position: 100%; }