JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

.info.legend {
  background-color: white;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

function getColor(d) {
    return d > 2 ? '#800026' :
           d > 1.5  ? '#BD0026' :
           d > 1.2  ? '#E31A1C' :
           d > 1.1  ? '#FC4E2A' :
           d > 1.5   ? '#FD8D3C' :
           d > 1.2   ? '#FEB24C' :
           d > 1.1   ? '#FED976' :
                      '#FFEDA0';
}

var legend = L.control({
  position: 'bottomleft'
});

legend.onAdd = function(map) {
  var div = L.DomUtil.create('div', 'info legend'),
    grades = [0.2, 0.26, 0.32, 0.38, 0.44, 0.5, 0.56, 0.62, 0.68, 0.74, 0.8, 0.86, 0.92, 0.98, 1.04, 1.1],
    labels = [],
    from, to;

  for (var i = 0; i < grades.length; i++) {
    from = grades[i];
    to = grades[i + 1];

    labels.push(
      '<i style="background:' + getColor(from + 1) + '">[color]</i> ' +
      from + (to ? '&ndash;' + to : '+'));
  }

  div.innerHTML = labels.join('<br>');
  return div;
};

// Do not forget to add your control to the map?
legend.addTo(map);