JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="map">

</div>

<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px;">
  <div style="width:290px; height: 350px; padding: 5px;">
    <label class="checkbox-label">
      <input name="gai_max_V" id="gai_max_V" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/>
      <p id="legend_text">
        Soil Runoff Capacity (1955)
      </p>
      </input>
    </label>
  <div id="div-slider1">
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">
  </div>
    <div id="div-slider2">
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">
  </div>
    <div id="div-slider3">
    <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">
  </div>
  <div style="width:290px; height: 150px; padding: 5px;">...</div>
  <div style="width:290px; height: 150px; padding: 5px;">...</div>
</div>
</div>

CSS

#map { height: 880px; }

#div-slider1 {
  width:100px;
}
#div-slider2 {
  width:200px;
}
#div-slider3 {
  width:300px;
}

JavaScript

var map = new L.Map('map', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        })
    ]
});