JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-map">
    <div id="hover1" class="hover"></div>
    <div id="hover2" class="hover"></div>
    <div id="hover3" class="hover"></div>
    <div class="contact-box">
        <div class="contact">This is a test.</div>
        <div class="contact">This is a test 2</div>
        <div class="contact">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;
}
.contact-box > .contact {
    position: absolute;
    float: left;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 300px;
    display: none;
}
#hover1 {
    margin-top: 40px;
    margin-left: 230px;
    background: aqua;
}
#hover3 {
    margin-top: 190px;
    margin-left: 345px;
    background: blue;
}
#hover2 {
    margin-top: 130px;
    margin-left: 345px;
    background: red;
}
.hover {
    position: absolute;
    float: left;
    width: 30px;
    height: 30px;
}
.hover:nth-child(1):hover ~ .contact-box :nth-child(1), .hover:nth-child(2):hover ~ .contact-box :nth-child(2), .hover:nth-child(3):hover ~ .contact-box :nth-child(3) {
    display: block;
}