JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [54.83, 37.11],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
            // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
            balloonContentHeader: "Балун метки",
            balloonContentBody: '<img src="http://open.az/uploads/posts/2013-04/1367222936_6.jpg"/>',
            balloonContentFooter: "Подвал",
            hintContent: "Хинт метки"
        }, {
            balloonMaxWidth: 800
        });

    myMap.geoObjects.add(myPlacemark);

    // Открываем балун на карте (без привязки к геообъекту).
    myMap.balloon.open([51.85, 38.37], "Содержимое балуна", {
        // Опция: не показываем кнопку закрытия.
        closeButton: false
    });

myPlacemark.balloon.open();
}