JSFiddle - React, Tailwind, and code Playground

HTML

<div id="f11">BLAH1</div></br></br>
<div id="f12">BLAH2</div>
<div id="floater">FLOAT</div>

CSS

#f11{
width: 100px;
height: 50px;
position: absolute;
background: transparent;
opacity: 1;
filter: alpha(opacity=0);
float: left;
border-width: 1px;
border-style: inset;
}
#f11:hover + #floater{
background:black
width: 320px;
height: 320px;
opacity:100;
right:0;
filter: alpha(opacity=100);
float: left;
position: fixed;
 }

#f12{
width: 100px;
height: 50px;
position: absolute;
background: transparent;
opacity: 1;
filter: alpha(opacity=0);
float: left;
border-width: 1px;
border-style: inset;
}
#f12:hover + #floater{
background:blue;
width: 320px;
height: 320px;
opacity:100;
top:30%;
left:0%;
filter: alpha(opacity=100);
float: left;
position: fixed;
}
#floater{
width: 320px;
height:320px;
opacity:0;
position: fixed;
right:0;
filter: alpha(opacity=0);
float: left;
-webkit-transition: 1s all;
-moz-transition: 1s all;
transition: 1s all;
border-width: 1px;
border-style: inset;
filter: alpha(opacity=100);
}