JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.search/2.7.2/leaflet-search.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.search/2.7.2/leaflet-search.mobile.min.css">
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/images/back.png"></script>
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/images/leaflet-search.jpg"></script>
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/images/loader.gif"></script>
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/images/search-icon-mobile.png"></script>
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/images/search-icon.png"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet.search/2.7.2/leaflet-search.min.js"></script>
<div class="col-md-8 col-md-offset-2 form-container">

	<div id="map-adress"></div>

	<div class="panel panel-default marker-panel">
        <div class="panel-heading">Create a post(Marker)</div>
        <div class="panel-body">  
            <div class="col-md-8 col-md-offset-4">
	            <p>Insert the adress of the marker position<br>
	        		(You can move the marker on the map to the right position).</p>
	        </div>
	            
	        <div class="form-group">
		        <label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label>
		        <div class="col-md-6">
		            <div id="findbox-adress"></div>
		        </div>

	            <div class="col-md-2">
		       		<button type="submit" class="btn btn-primary user_marker_btn">
	             		Validate
	   ...

CSS

/*******************************
	Clear all
*******************************/

* {
	margin: 0;
	padding: 0;
}


/******************************
	Fonts
******************************/

.navbar-brand {
	font-family: 'Lobster', cursive;
	font-size: 32px;
}


/******************************
	Navbar
******************************/





/******************************
	Classes
******************************/

.form-container {
	margin-top: 70px;
}

.marker-panel {
	margin-top: 20px;
}


/******************************
	Id's
******************************/

#user_marker_adress{
	display: none;
}


/******************************
	leaflet (Map)
******************************/

#map-adress {
	height: 350px;
}

.leaflet-control-search
.search-input {
    display: block;
    margin-top: -0.5px;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-top-color: rgb(204, 204, 204);
    border-right-color: rgb(204, 204, 204);
    border-bottom-color: rgb(204, 204, 204);
    border-left-color: rgb(204, 204, 204);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.leaflet-control-search
.search-tooltip {
	top: 34px;
	left: 4px;    
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-top-color: rgb(204, 204, 204);
    border-right-color: rgb(204, 204, 204);
    border-bottom-color: rgb(204, 204, 204);
    border-left-color: rgb(204, 204, 204);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px...

JavaScript

$(document).ready(function(){

    var map = new L.Map('map-adress', {zoom: 2, center: new L.latLng([24.61, -34.63]) });
    map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }));


    /*var markersLayer = new L.LayerGroup();  //layer contain searched elements
    map.addLayer(markersLayer);
    */

    map.addControl( new L.Control.Search({
        container: 'findbox-adress',
        url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
        jsonpParam: 'json_callback',
        propertyName: 'display_name',
        propertyLoc: ['lat','lon'],
        marker: L.marker([0,0], {draggable:'true'}).addTo(map).on('click', getLatLon),
        autoCollapse: false,
        collapsed: false,
        autoType: false,
        minLength: 2,
        autoResize: false,
        zoom: 18
        })
    );



    $( ".search-input" ).attr( "Placeholder", "No., Street, city, zip code, State and Country" );

    function getLatLon(e) {
        alert(this.getLatLng());
    }

    
    /************************************************************
    Create User Marker(Adress) Form
    ************************************************************/


    $(".user_marker_btn").click(function(){
        var searchString = $("#searchtext9").val();

        var searchArray = searchString.split(', ');

        console.log(searchArray);

        $("#a_street").val(searchArray[1]);
        $("#a_street_no").val(searchArray[0]);
        $("#a_zip_code").val(searchArray[5]);
        $("#a_village").val(searchArray[2]);
        $("#a_city").val(searchArray[3]);
        $("#a_state").val(searchArray[4]);
        $("#a_country").val(searchArray[6]);

        $("#user_marker_adress").css( "display", "block" );
    });
   

});