JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://upload.wikimedia.org/wikipedia/commons/9/98/800px-IMG_Edgeworthstown5469.jpg"></script>
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8/>
<title>Untitled Document</title>

</head>
<body>
<div id="container">
  <div id="map">
    <div class='tile'><a href=""> x:0 | y:0</a></div>
    <div class='tile'> x:1 | y:0</div>
    <div class='tile'> x:2 | y:0</div>
    <div class='tile'> x:3 | y:0</div>
    <div class='tile'> x:4 | y:0</div>
    <div class='tile'> x:5 | y:0</div>
    <div class='tile'> x:6 | y:0</div>
    <div class='tile'> x:7 | y:0</div>
    <div class='tile'> x:8 | y:0</div>
    <div class='tile'> x:9 | y:0</div>
    <div class='tile'> x:10 | y:0</div>
    <div class='tile'> x:11 | y:0</div>
    <div class='tile'> x:12 | y:0</div>
    <div class='tile'> x:0 | y:1</div>
    <div class='tile'> x:1 | y:1</div>
    <div class='tile'> x:2 | y:1</div>
    <div class='tile'> x:3 | y:1</div>
    <div class='tile'> x:4 | y:1</div>
    <div class='tile'> x:5 | y:1</div>
    <div class='tile'> x:6 | y:1</div>
    <div class='tile'> x:7 | y:1</div>
    <div class='tile'> x:8 | y:1</div>
    <div class='tile'> x:9 | y:1</div>
    <div class='tile'> x:10 | y:1</div>
    <div class='tile'> x:11 | y:1</div>
    <div class='tile'> x:12 | y:1</div>
    <div class='tile'> x:0 | y:2</div>
    <div class='tile'> x:1 | y:2</div>
    <div class='tile'> x:2 | y:2</div>
    <div class='tile'> x:3 | y:2</div>
    <div class='tile'> x:4 | y:2</div>
    <div class='tile'> x:5 | y:2</div>
    <div class='tile'> x:6 | y:2</div>
    <div class='tile'> x:7 | y:2</div>
    <div class='tile'> x:8 | y:2</div>
    <div class='tile'> x:9 | y:2</div>
    <div class='tile'> x:10 | y:2</div>
    <div class='tile'> x:11 | y:2</div>
    <div class='tile'> x:12 | y:2</div>
    <div class='tile'> x:0 | y:3</div>
    <div class='tile'> x:1 | y:3</div>
    <div class='tile'> x:2 | y:3</div>
    <div class='tile'> x:3 | y:3</div>
    <div class='tile'> x:4 | y:3</div>
    <div...

CSS

* {
    padding: 0;
    margin: 0;

}
.tile {
    width: 150px;
    height: 100px;
    float:left;
}

.tile a{
  color:orange;
  text-decoration:none;
}
#container {
    height:100%;
    width:100%;
    overflow:hidden;
}
#map {
    width:2560px;
    height:1440px;
    background:url("https://i.servimg.com/u/f87/11/39/67/05/mappy11.jpg");
}

JavaScript

$(document).ready(function() {
    $(function() {
        $( "#map" ).draggable();
        var cont = $('#container');
        var cw = cont.width( );
        var ch = cont.height( );
        var map = $('#map');
        var mw = map.width( );
        var mh = map.height( );
        var x1 = -mw + cw;
        var y1 = -mh + ch;
        map.draggable({containment:[x1,y1,0,0]});
    });
});