JSFiddle - React, Tailwind, and code Playground

by emn13

HTML

<div id="testbed">
    <div id="wrapper">
        This should change color when the box below is hovered
        <div id="button">Hover here</div>
    </div> 
</div>

CSS

#testbed{
    background: yellow;   
    padding:1em;
}

#button{
    background: #f88;   
    width:10em;
    text-align:center;
}

#button:before {
    z-index:-1;
    background:#88f;
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    content: "";
    opacity:0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity  0.3s;
    -o-transition: opacity  0.3s;
    transition: opacity 0.3s;
}

#button:hover:before {
     opacity:1;
}

#wrapper {
    position:relative;
    z-index:0;
    padding:0.5em;
}