JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
font-family: sans-serif;
}
/* Style tab links */
.tablink {
background-color: #9f9f9f;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 5px;
font-size: 16px;
width: 33.33%;
}
.tablink:hover {
background-color: #7f7f7f;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: black;
background-color: white;
display: none;
padding: 15px 5px;
height: 95%;
}
.map {
float: left;
width: 34.8%;
height: 100%;
border-radius: 5px 5px 0px 0px;
border-width: 1px;
border-style: dotted;
border-color: #000000;
}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Europe', this)" id="defaultOpen">Europe</button>
<button class="tablink" onclick="openPage('Asia',...