JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
                <g id="Layer_1">
                <g id="Map_2_">
                <g id="Map">
                <image overflow="visible" enable-background="new    " width="1600" height="1175" id="Map_1_" xlink:href="http://1.bp.blogspot.com/_SniTwfm5BwE/TD5ntu8-F8I/AAAAAAAACnY/LaZH__Hvn3M/s1600/Wheel+of+Time+Map+Final.jpg"></image>
                </g>
                </g>
                </g>                
                <g id="Layer_2">
                    <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5
                                                		1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25
	                                                	913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674
		                                                738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25
		                                                727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75
		                                                873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25 	" />
                <polygon id="Cairhien" fill="none" points="1485.5,472 1448.83,566.67 1437.5,587.5 1389.17,597 1353.5,612.33 1310.17,640
		                                                   1223.83,661.33 1204.5,661.33 1195.17,673.33 1177,593.67 1182.5,549.33 1198.5,509.67 1221.17,494 1267,472 1305.17,472
		                                               ...

CSS

#Arafel, #Andor, #Cairhien, #Saldaea, #Kandor, #Shienar, #TarValon_1_, #Illian, #Altara, #Amadicia, #Tarabon, #AradDoman, #Termalking, #AielWaste, #Tear {
    fill:rgba(255, 255, 255, 0.35);
    pointer-events:all;
}

#Arafel:hover, #Saldaea:hover, #Kandor:hover, #Shienar:hover {
  fill: rgba(255, 0, 0, 0.5);
}

#AielWaste:hover, #Termalking:hover {
    fill:rgba(237, 255, 0, 0.50);
}

#Andor:hover, #Amadicia:hover {
    fill:rgba(11, 121, 10, 0.50);
}

#TarValon_1_:hover {
    fill:rgba(109, 11, 185, 0.50);
}

#Cairhien:hover {
    fill:rgba(19, 73, 221, 0.50);
}

#Illian:hover, #Tear:hover {
    fill:rgba(36, 243, 237, 0.50);
}

#Altara:hover, #Tarabon:hover, #AradDoman:hover {
    fill:rgba(176, 9, 162, 0.50);
}