JSFiddle - React, Tailwind, and code Playground

by juvancica

HTML

<div class="bottom-content-wrapper content-padding">
  <div class="row overview-selection">
    <div class="col-sm-6 right-border-sm">
      <div class="region-selection-wrapper">
        <h3 class="region-selection-title margin-top-none-xs">PREGLED PO OKROŽJIH IN SODIŠČIH</h3>
        <p class="text-gray selection-description">Za pregled določenega okrožja, izberi območje na zemljevidu: </p>
        <div class="region-selection-map-wrapper">
          <div id="mapster_wrap_0" style="display: block; position: relative; padding: 0px; width: 543px; height: 371px;"><img class="mapster_el img-responsive region-selection-image" src="http://www.sodisce.si/images/poslovanje_sodstva/slovenia-map.png?v1" style="width: 543px; height: 371px; opacity: 1;"><canvas width="543" height="371" class="mapster_el" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;"></canvas>
            <canvas
              width="543" height="371" class="mapster_el" style="position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px; opacity: 1;"></canvas><img id="region-selection-slovenia" class="img-responsive region-selection-image" src="/images/poslovanje_sodstva/slovenia-map.png?v1" usemap="#image-map" style="border: 0px; position: absolute; left: 0px; top: 0px; padding: 0px; opacity: 0;"></div>
          <map name="image-map">
    <area target="" href="/poslovanje_sodstva/2018073012002740/10" alt="NG" title="NG" data-area-key="10" coords="33,268,40,270,53,259,71,266,106,283,109,266,122,258,117,246,124,228,103,206,110,187,96,183,98,169,79,170,51,151,71,133,57,118,57,113,42,106,29,124,0,145,4,168,24,166,31,177,50,179,18,205,14,224,30,234,33,227,42,232,27,255" shape="poly">
    <area target="" href="/poslovanje_sodstva/2018073012002740/11" alt="KP" title="KP" data-area-key="11"...