JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ol id="map">
<li><a href="http://www.google.com/search?hl=en&amp;q=valle+aosta" title="Valle D'Aosta" id="aosta"><span>Valle D'Aosta</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=piemonte" title="Piemonte" id="piemonte"><span>Piemonte</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=lombardia" title="Lombardia" id="lombardia"><span>Lombardia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=trentino+alto+adige" title="Trentino Alto-Adige" id="trentino"><span>Trentino Alto-Adige</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=veneto" title="Veneto" id="veneto"><span>Veneto</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=friuli+venezia+giulia" title="Friuli Venezia-Giulia" id="friuli"><span>Friuli Venezia-Giulia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=liguria" title="Liguria" id="liguria"><span>Liguria</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=emilia+romagna" title="Emilia Romagna" id="emilia"><span>Emilia Romagna</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=toscana" title="Toscana" id="toscana"><span>Toscana</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=umbria" title="Umbria" id="umbria"><span>Umbria</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=marche" title="Marche" id="marche"><span>Marche</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=lazio" title="Lazio" id="lazio"><span>Lazio</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=abruzzo" title="Abruzzo" id="abruzzo"><span>Abruzzo</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=molise" title="Molise" id="molise"><span>Molise</span></a></li>
<li><a href="http://www.google.com/search?hl=en&amp;q=campania" title="Campania" id="campania"><span>Campania</span></a></li>
<li><a...

CSS

body {margin: 2em;}
#map {width: 460px; height: 589px; margin: 0; padding: 0; background: url("http://www.css-zibaldone.com/test/more/real/italy-map/cartina.gif") no-repeat 0 0; position: relative;}
#map li {display: block; width: 12px;}
#map li a {display: block; position: absolute; width: 12px; height: 12px; margin: 0;}
#map li span {display: none;}

#aosta {top: 110px; left: 50px;}
#piemonte {top: 145px; left: 63px;}
#lombardia {top: 120px; left: 128px;}
#trentino {top: 85px; left: 179px; }
#veneto {top: 126px; left: 190px;}
#friuli {top: 98px; left: 238px; }
#liguria {top: 178px; left: 106px;}
#emilia {top: 174px; left: 170px;}
#toscana {top: 227px; left: 168px;}
#umbria {top: 253px; left: 210px; width: 20px !important;}
#marche {top: 232px; left: 240px; width: 20px !important;}
#lazio {top: 300px; left: 215px; width: 20px !important;}
#abruzzo {top: 284px; left: 260px; width: 20px !important;}
#molise {top: 314px; left: 287px; width: 20px !important;}
#campania {top: 346px; left: 290px; width: 20px !important;}
#puglia {top: 320px; left: 322px; width: 20px !important;}
#basilicata {top: 368px; left: 343px; width: 20px !important;}
#calabria {top: 425px; left: 360px; width: 20px !important;}
#sicilia {top: 509px; left: 270px; width: 20px !important;}
#sardegna {top: 385px; left: 86px; width: 20px !important;}