JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Microstable map test.
<br><br>
<div class='worldmap'>
  
  <div class='map_region map_region_1'></div>
  <div class='map_region map_region_2'></div>
  <div class='map_region map_region_3'></div>
  <div class='map_region map_region_4'></div>
  <div class='map_region map_region_5'></div>
  
</div>

CSS

.worldmap {width:100%;height:500px;position:relative;}

.map_region {position:absolute;transition:0.3s;}
.map_region:hover {border:2px solid red;transition:0.3s;}

.map_region_1 {position:absolute;top:30%;left:6%;}
.map_region_2 {position:absolute;top:10%;left:0%;}
.map_region_3 {position:absolute;top:3%;left:90%;}
.map_region_4 {position:absolute;top:60%;left:50%;}
.map_region_5 {position:absolute;top:70%;left:20%;}

JavaScript

$(function(){

$('.map_region').click(function(){
    var region = $(this).data('region');
    $('.map_region_'+region).fadeIn(300);
    
});




});