JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-map">
    <div id="hover1"></div>
    <div id="hover2"></div>
    <div id="hover3"></div>
    <div class="contact-box">
        <div id="contact1">This is a test.</div>
        <div id="contact2">This is a test 2</div>
        <div id="contact3">This is a test 3</div>
    </div>
</div>

CSS

.main-map {
    width: 700px;
    height: 558px;
    float: left;
    position: relative;
    margin-top: 100px;
    background-image: url(map-london.png);
}
.contact-box {
    width: 250px;
    position: relative;
    float: right;
    height: 300px;
    margin-right: -160px;
    margin-top: -50px;
}
#contact1 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover1 {
    position: absolute;
    float: left;
    margin-top: 40px;
    margin-left: 230px;
    width: 50px;
    height: 50px;
    background: aqua;
}
#hover1:hover ~ .contact-box > #contact1 {
    display: block;
}
#contact2 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover2 {
    position: absolute;
    float: left;
    margin-top: 130px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: red;
}
#hover2:hover ~ .contact-box > #contact2 {
    display: block;
}
#contact3 {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover3 {
    position: absolute;
    float: left;
    margin-top: 190px;
    margin-left: 345px;
    width: 30px;
    height: 30px;
    background: blue;
}
#hover3:hover ~ .contact-box > #contact3 {
    display: block;
}