JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">

    <body>
        <!-- Wrap all page content here -->
        <div id="wrap">
            <div class="container">

                <!-- LOGIN -->
                <div class="wrapper" id="login">
                    <small >LOGIN WITH YOUR USERNAME AND <b>PASSWORD</b></small>

                    <input type="text" class="lg-input" placeholder="Username">
                    <input type="password" class="lg-input password" placeholder="Password">
                    
                    <div class="btn-wrap">
                        <button class="btn btn-default btn-lg" id="recover">Reset Password</button>
                        <button class="btn btn-default btn-lg" id="login-btn">Login</button>
                    </div>
                    
                </div>

                <!-- ASSET LOCATION DETAILS -->
                <div class="wrapper" id="asset-loc">
                    <small>CONFIGURE ASSET <b>LOCATION</b> DETAILS</small>
                    <div class="row">
                        <div class="col-md-5">
                            <div id="map-wrapper">
                                <!-- THIS SCRIPT MUST BE HERE!! NOT TOO SURE WHY IMPORTANT -->
                                <script>
                                            $("#dashboard").on("next", "click", function(event, ui)
                                            { 
                                                map.invalidateSize(false);
                                            });
                                        </script>
                                <div id="map"></div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <h4>Street Name</h4>
                            <input type="text" class="med-input" value="Main...

CSS

#map {
height: 400px;
width:400px;
    margin-top:20px
}

JavaScript

$(function() {
    
     $('.wrapper,.nav-section,.sync,.contentProgress,.logout').hide();
    
    $('#login').show();
    //LOGIN
    $('#login-btn').click(function (){
        $('#login').hide();
        $('#asset-loc').show();
    });
    
    var map = L.map('map');
    
    function onLocationFound(e) {
        L.marker(e.latlng).addTo(map) ;
    }
    
    L.tileLayer('http://{s}.tile.cloudmade.com/d85910ea12614eff963d152664f4cd15/997/256/{z}/{x}/{y}.png', { attribution: 'Asset Management', maxZoom: 11 }).addTo(map);
    
    map.locate({setView: true, maxZoom: 11});
    
    map.on('locationfound', onLocationFound);
    
    function onLocationError(e) {
        alert(e.message);
    }
    
    map.on('locationerror', onLocationError);
});