JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primeiro">
  <div id="segundo"></div>
  <div id="efeito">sd</div>
</div>

CSS

#primeiro{
  width: 300px;
  height: 300px;
  background: red;
   float: left; 
}
#segundo{
  width: 150px;
  height: 150px;
  background: green;
  margin: auto; 
}
#efeito{
  width: 90px;
  height: 90px;
  background: pink;
  float: left; 
  position:absolute;
  margin-left:300px;
  top:8px;
}
#segundo:hover ~ #efeito {
    background: blue
}