JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
        />
        <title>Single page template</title>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.0-rc.1.min.css"
        />
        <link rel="stylesheet" href="css/leaflet.css" />
        <style>
            body.loaded {
                background-color: blue;
            }
            #facebook {
                background: url('css/images/facebook_signin.png');
            }
        </style>
    </head>
    
    <body>
        <div data-role="page" id="launchpad">
            <div data-role="panel" id="settings" data-position="left" data-theme="b"
            data-display="push">
                <input type="search" name="search" id="search-basic" data-mini="true"
                placeholder="Search" />
                <!-- panel content goes here -->
                <div data-role="content">
                    <ul data-role="listview" data-theme="a" data-divider-theme="a">
                        <li><a href="#categories">Categories</a>

                        </li>
                        <li><a href="#favorites">Favorites</a>

                        </li>
                    </ul>
                </div>
            </div>
            <!-- /panel -->
            <style>
                .userform {
                    padding:.8em 1.2em;
                }
                .userform h2 {
                    color:#555;
                    margin:0.3em 0 .8em 0;
                    padding-bottom:.5em;
                    border-bottom:1px solid rgba(0, 0, 0, .1);
                }
                .userform label {
                    display:block;
                    margin-top:1.2em;
                }
                .switch .ui-slider-switch {
                    width: 6.5em !important
                }
                .ui-grid-a {
                    margin-top:1em;
       ...

CSS

var geoFeatures = {
    "type": "Feature",
    "properties": {
        "name": "U.S. Cellular Field",
        "popupContent": "This is where the White Sox play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [41.829402, -87.633814]
    }
};

JavaScript

function Map() {

    var map = L.map('map', {
        center: [41.8294, -87.633814],
        zoom: 13,
        trackResize: true,
        inertia: true
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var baseballIcon = L.icon({
        iconUrl: 'icons/baseball-marker.png',
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28]
    });

    L.geoJson(geoFeatures, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: baseballIcon
            });
        }
    }).addTo(map);

    setTimeout(function () {
        map.invalidateSize();
    }, 1);
}