JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css">
<div id='map'></div>
<input type='text' oninput='geocodeThis()' id='search' placeholder='geocode here...'>

CSS

body {
    margin:0;
    padding:0;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
}
input {
    z-index: 10000 !important;
    position: fixed;
    background-color: #3BB2D0;
    color: white;
    font-size: 36pt;
}

JavaScript

L.mapbox.accessToken = 'pk.mapboxaccesstokenhere';
var geocoder = L.mapbox.geocoder('mapbox.places'),
    map = null;

function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (!map) {
        map = L.mapbox.map('map', 'mapbox.streets');
    }

    if (data.lbounds) {
        map.fitBounds(data.lbounds);
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 13);
    }
}


function geocodeThis() {
    var text = document.getElementById('search').value;
    if (text.length >= 5) {
        geocoder.query(text, showMap);
    }
}