JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.4/leaflet.fullscreen.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js"></script>
<div id="mapid"></div>
<input id='search' class='search-ui' placeholder='Taper le code unité' />

CSS

body {
  margin: 0;
  padding: 0;
}

#mapid {
  height: 400px;
  width: 100%
}

.search-ui {
  position: absolute;
  top: 10px;
  right: 200px;
  z-index: 1000;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw';
var mymap = L.map('mapid').setView([31.728, 3.691], 3).addControl(L.mapbox.geocoderControl('mapbox.places'));

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZHVlcm1hZWwiLCJhIjoiNTRmNjc2MjYzN2Y0NDk5ZjRjMTM1MDA2YjQzYTY4NjUifQ.zdJRPPXa8WvpcMZC1_RAyw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>' + '&nbsp;' +
    'Sandrine Duermael © InSHS, CNRS',
  id: 'mapbox.emerald'
}).addTo(mymap);
L.control.scale().addTo(mymap);
// load GeoJSON from an external file
/*$.getJSON('https://gist.githubusercontent.com/Duermael/2f1a218458c84fe94192625b4daaaf51/raw/f7b9a6cc3ee399d3736f03758c4b31dcd6d331f5/map.geojson', function(data) {
  var geojson = L.geoJson(data, {
    onEachFeature: function(feature, layer) {
      layer.bindPopup(feature.properties.CODE_UNITE + '&nbsp;' + feature.properties.INTITULÉ_UNITE + '<br />' + '<br />' + '<b> Section pilote : </b>' + '&nbsp;' + feature.properties.SECTION_PILOTE + '<br />' + '<b> Délégation régionale : </b>' + '&nbsp;' + feature.properties.LIBELLE_DELEGATION + '<br />' + '<b> Adresse postale  : </b>' + '<br />' + feature.properties.RUE + '<br />' + feature.properties.CODE_POSTAL + '&nbsp;' + feature.properties.BUREAU_DISTRIBUTEUR + '<br />' + feature.properties.PAYS + '<br />' + '<b> Adresse Web : </b>' + '&nbsp;' + feature.properties.ADRESSE_WEB);
 
    }
         
  });
  //geojson.addTo(mymap);

  var markers = L.markerClusterGroup();
  markers.addLayer(geojson);
  mymap.fitBounds(geojson.getBounds());
  //map.addLayer(markers);
  markers.addTo(mymap);
});*/
// DEFINE THE CLUSTER LAYER
/*var markers =...