JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?coordorder=longlat&amp;key=&amp;lang=ru_RU&amp;mode=debug"></script>
<div id="map"></div>

CSS

body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }

JavaScript

ymaps.ready(function(){
    var 
    map = new ymaps.Map('map', {
        center: [55.76, 37.64],
        zoom: 6
    }),    
        
    placemarkLayout = ymaps.templateLayoutFactory.createClass("<div>Метка: {{properties.name}}</div>"),
  
    balloonLayout = ymaps.templateLayoutFactory.createClass("<div>Одинокий балун: {{name}}</div>"),        
    
    openPlacemark = function() {
        placemark = new ymaps.Placemark(map.getCenter(), {
            name: 'placemark'
        }, {
            balloonLayout: placemarkLayout
        });
    
        map.geoObjects.add(placemark);
        placemark.balloon.open();
    },        
        
    openSingleBalloon = function() {  
        map.balloon.open(map.getCenter(), {
            name: "single balloon"
          }, {
            layout: balloonLayout
          }
        );
    };        
    
    openPlacemark();
    setTimeout(function(){
        openSingleBalloon();
    }, 2000);
})