JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div></div>

CSS

div{
    width:200px;
    height:200px;
    background-image: -webkit-linear-gradient(top right, #dadada 5%, #ffffff 50%, #E1686F 99%);
    background-image: -moz-linear-gradient(top right, #dadada 5%, #ffffff 50%, #E1686F 99%);
    background-image: -o-linear-gradient(top right, #dadada 5%, #ffffff 50%, #E1686F 99%);
    background-image: linear-gradient(to bottom left, #dadada 5%, #ffffff 50%, #E1686F 99%);
    position:relative;
}
div:before{
    background: -moz-linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    background: -o-linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    background: -khtml-linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    background: -ms-linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    background: linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    background: -webkit-linear-gradient(225deg, #dadada 1%, #ffffff 95%, #E1686F 99%);
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    content:" ";
    opacity:0;
    transition:opacity 1s;
}
div:hover:before{
    opacity:1;
}