JSFiddle - React, Tailwind, and code Playground

by maccman

HTML

<div class="element"><div class="inner"></div></div>

CSS

.element {  
  width: 100px;  
  height: 100px;  
  position: relative;
  background: -webkit-linear-gradient(#C7D3DC,#5B798E);    
}  

.element .inner { 
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(#DDD, #FAFAFA);          
  opacity: 0;
  -webkit-transition: opacity 1s linear;
}

.element:hover .inner {
  opacity: 1;
}