JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="height: 100%">
<head>
	<title>P3110273_w1180_h787.jpg</title>
  
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
  <div id="first">
    <div id="button">
    
    </div>
  </div>
  <div id="second">
  
  </div>
</body>
</html>

CSS

#first {
  position:absolute;
  background-color: red;
  width:70%;
  height:300px;
  left: 0;
  top: 0;
}
#first:hover #button{ background-color: #00ffff;}
#second {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 50%;
  height: 200px;
  background-color: green;
  z-index: 3;
}
#button {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 30px;
  width: 30px;
  background-color: blue;
  z-index: 5;
}