JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<style>
body {
margin:0;
}
.example{
min-width:500px;
min-height:300px;
width:500px;
height:400px;
overflow:hidden;
border: ridge medium #0F3;
}
#drag3,#drag4{
width:1920px; /*Общая масимальная ширина карты*/
height:1800px; /*Общая масимальная высота карты*/
background:url(/dark-textile-background.jpg) repeat;
overflow:hidden;
font-size:0; /* убираем горизонтальные отступы */
line-height:0; /* ...и вертикальные в некоторых браузерах */
letter-spacing:-1px; /* переубеждаем webkit'ы */
}
div#sector {
border:1px solid;
width:60px;
height:60px;
display:inline-block;
zoom:1;
display: -moz-inline-stack!important;
line-height:normal;
letter-spacing:normal;
//display:inline;
}
</style>
</head>
<body>
<div id="example4" class="example">
<div id="drag4">
<div id="sector" rel="0_1"></div>
<div id="sector" rel="1_1"></div>
<div id="sector" rel="2_1"></div>
<div id="sector" rel="3_1"></div>
<div id="sector" rel="4_1"></div>
<div id="sector" rel="5_1"></div>
<div id="sector" rel="6_1"></div>
<div id="sector" rel="7_1"></div>
<div id="sector" rel="8_1"></div>
<div id="sector" rel="9_1"></div>
<div id="sector" rel="10_1"></div>
<div id="sector" rel="0_2"></div>
<div id="sector" rel="1_2"></div>
<div id="sector" rel="2_2"></div>
<div id="sector" rel="3_2"></div>
<div id="sector" rel="4_2"></div>
<div id="sector" rel="5_2"></div>
<div id="sector" rel="6_2"></div>
<div id="sector" rel="7_2"></div>
<div id="sector" rel="8_2"></div>
<div id="sector" rel="9_2"></div>
<div id="sector" rel="10_2"></div>
<div id="sector" rel="0_3"></div>
<div id="sector" rel="1_3"></div>
<div id="sector" rel="2_3"></div>
<div id="sector" rel="3_3"></div>
<div...