JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map {
    position: fixed;
    left:0;
    top: 0;
    right: 0;
    bottom: 0;
}
.my-custom-control {
    background-color: white;
    padding: 10px;
}

JavaScript

// Demo code from leafletjs.com
var map = L.map('map').setView([51.505, -0.09], 13);

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 marker = L.marker([51.5, -0.09]).addTo(map).bindPopup('Popup.');

var MyControl = L.Control.extend({
    options: {
        position: 'bottomleft'
    },

    onAdd: function (map) {
        // create the control container with a particular class name
        var container = L.DomUtil.create('div', 'my-custom-control');
        container.innerHTML += 'This is an example of how to allow text inside a Leaflet custom control to be selectable.<br>You need to use disableClickPropagation.';

        L.DomEvent.disableClickPropagation(container);
        return container;
    }
});

map.addControl(new MyControl());