JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
    height: 100%;
    margin: 0;
    padding: 0;
}

@media (min-width: 1px) and (max-width: 500px) {
    .leaflet-popup-content-wrapper {
        position: relative;
    }
    .leaflet-popup-content {
        position: fixed;
        top: 0;
        bottom:0;
        right:0;
    }
}

JavaScript

(function() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    var marker = L.marker([51.5, -0.09])
        .bindPopup('<h1>Here is a heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nesciunt sit consequuntur nostrum sed officiis blanditiis impedit ipsam quaerat temporibus odio praesentium quo officia aliquam nemo rem est architecto ab.</p>')
        .addTo(map); L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
	    attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
})();