JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>

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

CSS

#map {
            width: 950px;
            height: 420px;
        };

JavaScript

ymaps.ready(function () {
    
    var myMap = new ymaps.Map('map', {
        center: [55.751574, 37.573856],
        zoom: 10,
        controls: [
            'fullscreenControl', 
            'zoomControl', 
            'searchControl'
        ]
    }, {
        maxZoom: 15,
        minZoom: 10
    });        
       var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
        balloonContentBody: [
            '<address>',
            '<strong>Офис Яндекса в Москве</strong>',
            '<br/>',
            'Адрес: 119021, Москва, ул. Льва Толстого, 16',
            '<br/>',
            'Подробнее: <a href="http://company.yandex.ru/">http://company.yandex.ru/</a>',
            '</address>'
        ].join('')
    }, {
        preset: 'islands#redDotIcon'
    });
    
    
      var myPlacemark2 = new ymaps.Placemark( [55.791519747099514,37.274757232429494], {
        balloonContentBody: [
            '<address>',
            '<strong>Офис Яндекса в Москве</strong>',
            '<br/>',
            'Адрес: 119021, Москва, ул. Льва Толстого, 16',
            '<br/>',
            'Подробнее: <a href="http://company.yandex.ru/">http://company.yandex.ru/</a>',
            '</address>'
        ].join('')
    }, {
        preset: 'islands#redDotIcon'
    });

    myMap.geoObjects.add(myPlacemark);
      myMap.geoObjects.add(myPlacemark2);
    
    myMap.events.add('balloonopen', function (e) {  console.log ('balloonopen event!'); });    
    myPlacemark.balloon.open();
});