JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="YMapsID"></div>

CSS

#YMapsID {
    width: 100%;
    height: 400px;
}

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map('YMapsID', {
        center: [55.733835, 37.588227],
        zoom: 12,
        // Обратите внимание, что в API 2.1 по умолчанию карта создается с элементами управления.
        // Если вам не нужно их добавлять на карту, в ее параметрах передайте пустой массив в поле controls.
        controls: []
    });

    var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
        balloonContentBody: [
            '<address>',
            '<strong>Офис Яндекса в Москве</strong>',
            '<br/>',
            'Адрес: 119021, Москва, ул. Льва Толстого, 16',
            '<br/>',
            'Подробнее: <a href="https://company.yandex.ru/">https://company.yandex.ru</a>',
            '</address>'
        ].join('')
    }, {
        balloonAutoPan: true,
        balloonAutoPanMargin: [300, 0, 0, 200],
        balloonPanelMaxMapArea: 0,
        preset: 'islands#redDotIcon'
    });

    myMap.geoObjects.add(myPlacemark);
});