JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<div class="wrap">
  <div id="overlay">Brush</div>
  <div id="map"></div>    
</div>

CSS

body {
      padding: 0;
      margin: 0;
    }
    html, body, .wrap, #map {
      height: 100%;
      width: 100%;
    }
    #map {
      z-index: 1;
    }
    #overlay { 
      position: absolute; 
      bottom: 10px; 
      left: 10px;  
      z-index: 99; 
      background-color: white; 
      padding: 10px; 
      font: 14px/16px Arial; 
      background: rgba(255,255,255,0.8); 
      box-shadow: 0 0 15px rgba(0,0,0,0.2); 
      border-radius: 5px; 
    }

    .axis--grid .domain {
      fill: #ddd;
      stroke: none;
    }

    .axis--x .domain,
    .axis--grid .tick line {
      stroke: #fff;
    }

    .axis--grid .tick--minor line {
      stroke-opacity: .5;
    }

JavaScript

var map = L.map('map').setView([51.505, 0], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

var json = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "value": 1, "name": "one" }, "geometry": { "type": "Point", "coordinates": [ -0.039809283088199, 51.49259693809617 ] } },
{ "type": "Feature", "properties": { "value": 2, "name": "two" }, "geometry": { "type": "Point", "coordinates": [ -0.024609374999963, 51.4826815053082 ] } },
{ "type": "Feature", "properties": { "value": 3, "name": "three" }, "geometry": { "type": "Point", "coordinates": [ -0.030158547794081, 51.508667376598062 ] } },
{ "type": "Feature", "properties": { "value": 4, "name": "four" }, "geometry": { "type": "Point", "coordinates": [ -0.01616498161761, 51.497553845910254 ] } },
{ "type": "Feature", "properties": { "value": 5, "name": "five" }, "geometry": { "type": "Point", "coordinates": [ 0.001206341911803, 51.491545403504134 ] } },
{ "type": "Feature", "properties": { "value": 6, "name": "six" }, "geometry": { "type": "Point", "coordinates": [ -0.007479319852903, 51.502209844056267 ] } },
{ "type": "Feature", "properties": { "value": 7, "name": "seven" }, "geometry": { "type": "Point", "coordinates": [ -0.003860294117609, 51.511970876580335 ] } },
{ "type": "Feature", "properties": { "value": 8, "name": "eight" }, "geometry": { "type": "Point", "coordinates": [ -0.051872702205847, 51.4984550439641 ] } },
{ "type": "Feature", "properties": { "value": 9, "name": "nine" }, "geometry": { "type": "Point", "coordinates": [ -0.044875919117611, 51.506264680698742 ] } },
{ "type": "Feature", "properties": { "value": 10, "name": "ten" }, "geometry": { "type": "Point", "coordinates": [ -0.018095128676433, 51.516325124205068 ] } }
]
};

var layer_group =...