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>
<button clicked='test()'>
test
</button>
<h1 id = 'Person'>Vardan</h1>
<div id="map"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    bottom: 100px;
    top: 100px;
    width: 100%;
    z-index:9;
}
#Person{
color:red;
font-family: arial;
position:absolute;
top:300px;
opacity:0.3;
z-index:10;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var x = document.getElementById('Person');
function test(){
x.style.color = 'black';
}