JSFiddle - React, Tailwind, and code Playground

by glee

HTML

<div id="holder">
Glee is awesome!
<div id="inner"></div>
</div>

CSS

#holder{
    background-color: orange;
    color: white;
    width: 150px;
    position: relative;
    left: 5px;
    top: 5px;
}
#inner{
    background-color: rgba(255,0,0,0.5);
    width: 200px;
    height: 75px;   
    position: absolute;
    bottom: -85px;
    left: 25px;
}

JavaScript

var inn = document.getElementById("inner"), outt = document.getElementById("holder");
outt.onmouseover = function() {
   this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/
}
outt.onmouseout = function() {
   this.style.backgroundColor = "orange";
}
inn.onmouseover = function(ev) {
   ev.stopPropagation();
}