JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<div class="element">

</div>

SCSS

.element {      
    height: 100vh;     
    width: 100vw;
    background: linear-gradient(to right, darkblue 25%, indianred 25% 50%, yellow 50% 75%, orange 75% 100%);  
    
    transition: all 350ms ease-in-out;
}

.element:hover {
    background: linear-gradient(to right, darkblue 5%, indianred 5% 10%, yellow 10% 95%, orange 95% 100%);      
}