JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hoverme" style="background-color: red">
    <p>Lorem ipsem gimme a dollar!</p>
</div>

CSS

.hoverme {
    position: relative;
}

.hoverme:after {
  -webkit-transition: all 0.5s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.5s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.5s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.5s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    
}

.hoverme:hover:after {
    background-color: #ddd !important;
}