JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<div class="map1 map">map1</div>
<div class="map2 map">map2</div>
<div class="map3 map">map3</div>

<div id="icons">
    <span class="a">a</span>
    <span class="b">b</span>
    <span class="c">c</span>
    <span class="d">d</span>
    <span class="e">e</span>
    <span class="f">f</span>
    <span class="g">g</span>
    <span class="h">h</span>
    <span class="i">i</span>
</div>

CSS

.map {width:300px;height:300px;;color:#fff;text-align:center}
.map1 {background:red}
.map2 {background:yellow;border-radius:50%}
.map3 {background:blue}

#icons {margin:20px;clear:both}
span {display:block;background:green;color:#fff;width:60px;height:60px;float:left;margin-right:10px;display:none;text-align:center;line-height:60px;position:absolute;box-shadow:3px 3px 5px black}

.map1Page #icons .show {top:90px;left:50px}
.map1Page #icons .show ~ .show {top:160px;left:100px}
.map1Page #icons .show ~ .show ~ .show {top:90px;left:220px}

.map2Page #icons .show {top:40px;left:90px}
.map2Page #icons .show~.show {top:120px;left:50px}
.map2Page #icons .show~.show~.show {top:180px;left:200px}

.map3Page #icons .show {top:160px;left:30px}
.map3Page #icons .show~.show {top:30px;left:200px}
.map3Page #icons .show~.show~.show {top:120px;left:170px}

JavaScript

var map=['map1','map2','map3']
var icons=['a','b','c','d','e','f','g','h','i']

setInterval(function() {
 var m=getRandomInt(1, 3),map='map'+m,i1=getRandomInt(1,9),i2=getRandomInt(1,9),i3=getRandomInt(1,9),arr=[i1,i2,i3];

 filter(map,arr)   
},2000);


function filter(map,iconnr) {
    $('body').removeClass().addClass(map+'Page');
    $('.'+map).show().siblings('.map').hide();
    $('#icons span').hide().removeClass('show');
    $(iconnr).each(function(obj,index) {
        $('.'+icons[index-1]).show().addClass('show');
    })
}
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}