JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>

<body>

<div id="map"></div>
</body>

</html>

CSS

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

JavaScript

navigator.geolocation.getCurrentPosition(showMap, handleError);

		function handleError(err) {
			document.getElementById('map').innerHTML = err.message;
			myCoords = [55.76, 37.64];
			myZoom = 10;
			ymaps.ready(init);
			console.log(err);
		}

		var myMap;
		var myCoords = [];
		var myZoom = 10;

		function init () {
			myMap = new ymaps.Map('map', {
				center: myCoords,
				zoom: myZoom
			});
		}

		function showMap(position) {
			if (position === undefined) {
				myCoords = [55.76, 37.64];
				myZoom = 10;
			} else {
				myCoords.push(position.coords.latitude);
				myCoords.push(position.coords.longitude);
				myZoom = 16;
			}
            ymaps.ready(init);
		}