JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>Example Text!</div>

CSS

.container {
    width:500px; height:300px;
    color:white;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141413));
    background-image: -webkit-linear-gradient(top, #333333, #141413);
    background-image: -moz-linear-gradient(top, #333333, #141413);
    background-image: -ms-linear-gradient(top, #333333, #141413);
    background-image: -o-linear-gradient(top, #333333, #141413);
    background-image: linear-gradient(top, #333333, #141413);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position:relative;
    z-index: 0;
}
.container:after {
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #FF0000, #770000);
    background-image: -moz-linear-gradient(top, #FF0000, #770000);
    background-image: -ms-linear-gradient(top, #FF0000, #770000);
    background-image: -o-linear-gradient(top, #FF0000, #770000);
    background-image: linear-gradient(top, #FF0000, #770000);
    position:absolute;
    top:0;left:0;
    opacity:0;
    width:100%; height:100%;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: -1;
}
.container:hover { color:white; }
.container:hover:after { opacity:1; }