JSFiddle - React, Tailwind, and code Playground

HTML

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

<button id="showTab2">Show Tab 2</button>
<button id="hideTab2">Hide Tab 2</button>

<div id="tab2">
    <div id="map2"></div>
</div>

CSS

#map {
    height: 500px;
}

#tab2 {
    border: 1px solid red;
    display: none;
}

#map2 {
    height: 500px;
}

JavaScript

var map = L.map("map").fitBounds([[50.5, 5], [52.5, 6]]);

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.441767, 5.470247],{
    draggable: true
}).addTo(map);

var map2 = L.map("map2").fitBounds([[50.5, 5], [52.5, 6]]);

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

var tab2 = document.getElementById("tab2");

document.getElementById("showTab2").addEventListener("click", function () {
	tab2.style.display = "block";
    //map2.invalidateSize(); // Uncomment this line and re-run to get correct behaviour.
    map2.fitBounds([[50.5, 5], [52.5, 6]]);
});

document.getElementById("hideTab2").addEventListener("click", function () {
	tab2.style.display = "none";
});