JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='islands_map'>

<div class='mapisland island1 is_11'>1</div>
<div class='mapisland island2 is_12'>2</div>
<div class='mapisland island3 is_13'>3</div>
<div class='mapisland island4 is_14'>4</div>
<div class='mapisland island5 is_15'>5</div>
<div class='mapisland island6 is_16'>6</div>
<div class='mapisland island7 is_21'>7</div>
<div class='mapisland island8 is_22'>8</div>
<div class='mapisland island9 is_23'>9</div>
<div class='mapisland island10 is_24'>10</div>
<div class='mapisland island11 is_25'>11</div>
<div class='mapisland island12 is_26'>12</div>
<div class='mapisland island13 is_31'>13</div>
<div class='mapisland island14 is_32'>14</div>
<div class='mapisland island15 is_33'>15</div>
<div class='mapisland island16 is_34'>16</div>
<div class='mapisland island17 is_35'>17</div>
<div class='mapisland island18 is_36'>18</div>
<div class='mapisland island19'>19</div>
<div class='mapisland island20'>20</div>

</div>

CSS

.islands_map  {width:860px;height:570px;background-image:url(https://ak9.picdn.net/shutterstock/videos/12998309/thumb/12.jpg);background-position:center;background-size:cover;position:relative;}

.mapisland {width:120px;height:80px;border:1px solid blue;border-radius:5px;position:absolute;background-image:url(http://griffusion.elementfx.com/pics/ui/islands.gif);}

.is_11 {background-position:0 0;}
.is_12 {background-position:-120px 0;}
.is_13 {background-position:-240px 0;}
.is_14 {background-position:-360px 0;}
.is_15 {background-position:-480px 0;}
.is_16 {background-position:-600px 0;}

.is_21 {background-position:0 -80px;}
.is_22 {background-position:-120px -80px;}
.is_23 {background-position:-240px -80px;}
.is_24 {background-position:-360px -80px;}
.is_25 {background-position:-480px -80px;}
.is_26 {background-position:-600px -80px;}

.is_31 {background-position:0 -160px;}
.is_32 {background-position:-120px -160px;}
.is_33 {background-position:-240px -160px;}
.is_34 {background-position:-360px -160px;}
.is_35 {background-position:-480px -160px;}
.is_36 {background-position:-600px -160px;}

.island1 {top:157px;left:363px;}
.island2 {top:226px;left:489px;}
.island3 {top:209px;left:251px;}
.island4 {top:94px;left:479px;}
.island5 {top:134px;left:166px;}
.island6 {top:294px;left:321px;}
.island7 {top:244px;left:603px;}
.island8 {top:337px;left:454px;}
.island9 {top:65px;left:274px;}
.island10 {top:341px;left:209px;}
.island11 {top:62px;left:605px;}
.island12 {top:365px;left:564px;}
.island13 {top:269px;left:120px;}
.island14 {top:145px;left:664px;}
.island15 {top:59px;left:95px;}
.island16 {top:387px;left:671px;}
.island17 {top:312px;left:698px;}
.island18 {top:397px;left:346px;}
.island19 {top:22px;left:414px;}
.island20 {top:379px;left:83px;}