JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css">
<input type='text' id='place' placeholder='geocode here...'>
<div id='map-canvas'></div>

CSS

#map-canvas {
  height: 600px;
  width: 100%;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiaG5ubzIiLCJhIjoiY2lseTR6NjlyMDBmcnc4bTV2aGMwMW5saCJ9.m6S-wGO5WiFDO6gdnTy3zA';
  var geocoder = L.mapbox.geocoder('mapbox.places');
  var map = L.mapbox.map('map-canvas', 'mapbox.streets').setView([50.50, 10.28], 7);
  $(document).on('keyup', "#place", function() {
    var text = $(this).val();
    if (text.length >= 5) {
      geocoder.query({
        query: text,
        country: 'de'
      }, function(err, data) {
        map.setView([data.latlng[0], data.latlng[1]], 10);
      });
    }
  });