JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tabel" border="0" width=100% ">
<tr><td width="40% "><div class="kaartje "><img alt="kaart Nederland " border="0 " height=" " src="http://i.imgur.com/HtKswPu.jpg " usemap="#Map " width=" " />
<map id="Map " name="Map ">
   <area shape="circle " alt="hoorn " title=" " coords="167,130,8 " href="hoorn " target=" " />
   <area shape="circle " alt="lelystad " title=" " coords="206,148,9 " href="lelystad " targ idet=" " />
   <area shape="circle " alt="zwolle " title=" " coords="246,152,9 " href="zwolle " target=" " />
   <area shape="circle " alt="velsen " title=" " coords="135,149,8 " href="velsen " target=" " />
   <area shape="circle " alt="purmerend " title=" " coords="160,153,8 " href="purmerend " target=" " />
   <area shape="circle " alt="amsterdam " title=" " coords="157,172,9 " href="amsterdam " target=" " />
   <area shape="circle " alt="leiden " title=" " coords="129,182,9 " href="leiden " target=" " />
   <area shape="circle " alt="utrecht " title=" " coords="184,201,8 " href="utrecht " target=" " />
   <area shape="circle " alt="arnhem " title=" " coords="229,201,8 " href="arnhem " target=" " />
   <area shape="circle " alt="gouda " title=" " coords="145,211,8 " href="gouda " target=" " />
   <area shape="circle " alt="delft " title=" " coords="111,217,9 " href="delft " target=" " />
   <area shape="circle " alt="nieuwegein " title=" " coords="172,219,8 " href="nieuwegein " target=" " />
   <area shape="circle " alt="nijmegen " title=" " coords="232,230,9 " href="nijmegen " target=" " />
   <area shape="circle " alt="westland " title=" " coords="93,229,8 " href="westland " target=" " />
   <area onclick="showDiv3(this)" shape="circle " alt="breda " title=" " coords="146,272,8 "  href="#" target=" " />
</map></div></td><td width=" " valign="top "><div id="zweef"><span class="rood" id="1"><a onclick="showDiv1(this)">Amsterdam</a>
</span>
<br /><br />
<span class="rood" id="2"><a onclick="showDiv1(this)">Arnhem</a>
</span>
<br /><br />
<span...

CSS

#zweef {
     float: left;
 }

.rood {
    
}

.rood:hover {
    color: #f30089;
}

.rood:active {
    color: #f30089;
}
 .contactBG {
     width: 244px;
     height: 400px;
     background-color:#f30089;
     float: right;
 }

JavaScript

function showDiv1(obj) {
    var menus = document.getElementsByClassName("rood");
    for (var i = menus.length - 1; i >= 0; i--)
        {
            //alert(menus[i].id);
            var elem = document.getElementById(menus[i].id);
            elem.style.backgroundColor = "transparent";
            elem.style.backgroundColor = "#E9EEBF";
        }
    document.getElementById('store').innerHTML = 'Vestiging 1 is nu open';
    obj.style.backgroundColor = "red";    
}

function showDiv2(obj) {
    document.getElementById('store').innerHTML = '<p><strong>Amsterdam <br /><br />Contactpersoon</strong><br />Liesbeth Aleva, zorgcoordinator<br />tel 020-682 7007<br />email: [email protected]</p><p><strong>Adres</strong><br />Van Halstraat 10<br />1051HH Amsterdam<br />020 682 70 07<br /><br /><strong>Openingstijden</strong><br />Maandag t/m Donderdag<br />12.00 - 17:00<br /><br /><strong>Route</strong><br />Klik hier voor routeplanner<br /><br />Klik <a href="amsterdam">hier</a> voor de website</p>';
     obj.style.backgroundColor = "red"; 
}

function showDiv3(obj) {
    document.getElementById('store').innerHTML = 'Vestiging 3 is nu open';
     obj.style.backgroundColor = "red"; 
}