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(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            balloonContent: '<div style="width:500px">Балун шириной не более 200px</div>'
        }, {
            preset: 'islands#dotIcon',
            balloonMaxWidth: 200
        });


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