JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-fckeditor-plugin.googlecode.com/svn/trunk/jquery.MetaData.js"></script>
<script type="text/javascript" src="https://rawgithub.com/kemayo/maphilight/dd84221dec229fa5525760a1c791eb9e08f20dd3/jquery.maphilight.min.js"></script>
<script>
    $(function() {
        $("img[usemap]").maphilight();
    });
</script>
<img alt="670ac8459716aadb3a3fc5db6cee12fb.png" src="http://htmlmapgenerator.ru/upload/670ac8459716aadb3a3fc5db6cee12fb.png" usemap="#myMap" width="970" height="375" />
<map name="myMap" id="myMap">
    <!-- top -->
    <area shape="poly" coords="3,3,157,3,157,170,25,170,25,137,3,137" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="160,3,225,3,225,170,160,170" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="227,3,355,3,355,103,295,103,295,138,325,138,325,170,227,170" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="356,30,420,30,420,170,320,170,320,138,293,138,293,97,356,97" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="422,30,484,30,484,97,545,97,545,138,518,138,517,170,422,170" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="485,3,615,3,617,170,520,170,520,140,546,140,546,98,485,98" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="618,3,745,3,745,116,735,116,735,170,618,170" class="{fill:true,fillColor:'FFff00',fillOpacity:0.4,stroke:false}" target="_self" />
    <area shape="poly" coords="747,3,810,3,810,170,737,170,737,118,747,117"...