JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="border: 3px solid #b7c73c;width: 500px; height: 500px;"></div>

JavaScript

ymaps.ready(init);
function init() {
 myMap = new ymaps.Map('map', {
  center: [59.938628, 30.306974], // Москва
  zoom: 11,
  controls: ['zoomControl', 'typeSelector', 'fullscreenControl']
});
myPlacemark0 = new ymaps.Placemark([59.924194,30.350233], {
			  hintContent: "Безымянный остров",
			  balloonContentHeader: "Безымянный остров",
			  balloonContentBody: ['Санкт-Петербург, Россия'].join(''),
			  balloonContentFooter: '<a href="#">Подробнее<a>'
			 }, {
       	autoPan: false,
			  balloonPanelMaxMapArea: 'Infinity', //Баллун открывается в виде панели снизу
			 }),
       myMap.geoObjects.add(myPlacemark0);
}