JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet-src.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css">
<div id="map"></div>

CSS

#map { height: 500px; }

JavaScript

var map = L.map('map');
map.setView([40, 0], 13);
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>';
var tileLayer = L.tileLayer(cloudmadeUrl, {attribution: cloudmadeAttribution, maxZoom: 18});
tileLayer.addTo(map);

// create custom control for user to enter city to zoom on
var searchField = L.Control.extend({
    options: {position: 'topright'},
    onAdd: function(map) {
        var className = 'leaflet-control-scale',
            container = L.DomUtil.create('div', className);
        this._displaySearchField(className, container);
        return container;
    },
    _displaySearchField: function(className, container) {
        var searchFieldElement = L.DomUtil.create('input', className, container);
        searchFieldElement.id = "city";
        searchFieldElement.value = "Stadt suchen...";
        searchFieldElement.autofocus = "autofocus";
        // L.DomUtil.setOpacity(searchFieldElement, 0.8);
        L.DomEvent.disableClickPropagation(searchFieldElement)
        return searchFieldElement;
    }
});
var searchFieldControl = new searchField();
map.addControl(searchFieldControl);