JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map {
    width: 800px;
    height: 600px;
}
placemark_layout_container {
  position: relative;
  font-family: "PT Sans";
  font-size: 9px;
  text-align: center;
  font-weight: bold;
}
.placemark_layout_container .circle_layout, .placemark_layout_container .single_circle_layout {
  background-color: #1C6EC5;
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  color: #ffffff;
  line-height: 18px;
  border-radius: 30px;
}
.placemark_layout_container .circle_layout:hover, .placemark_layout_container .single_circle_layout:hover {
  border: 2px solid #da4f49;
}

.popover {
  display: inline-block;
  position: relative;
  background: #176BC4;
  border: 1px solid #ffffff;
  color: #ffffff;
  width: auto;
  margin-bottom: 30px;
}
.popover .arrow {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: calc(50% - 4px);
  bottom: -5px;
  background: #176BC4;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
  z-index: 7;
}
.popover .popover .close {
  position: absolute;
  right: 5px;
  top: 1px;
}
.popover .popover .close .btn {
  margin-top: 10px;
}
.popover .popover-inner {
  position: relative;
  z-index: 15;
}
.popover .popover-content {
  display: block;
  padding: 3px 5px;
  position: relative;
  z-index: 10;
}

JavaScript

var items = [["43.60494205273887,39.811106398701675",[{"price":1500000,"id":245794},{"price":2600000,"id":313721}]],["43.587611,39.805459",[{"price":980000,"id":292911}]],["43.58816027433024,39.768835790455356",[{"price":2900000,"id":310864}]],["43.61599477351808,39.716037176549236",[{"price":4200000,"id":316121}]],["43.60941690289634,39.71100993598271",[{"price":3950000,"id":327481}]],["43.560928,39.794163",[{"price":2700000,"id":301723}]],["43.61890755643214,39.75450256839397",[{"price":2700000,"id":319569}]],["43.58264743675765,39.74536763504149",[{"price":1590000,"id":318567}]],["43.61825,39.723601",[{"price":4950000,"id":314062}]],["43.58117336115282,39.73882304504514",[{"price":3500000,"id":286942}]],["43.635837762142124,39.69631120562542",[{"price":3700000,"id":300523}]],["43.6396639033935,39.6785162575543",[{"price":3400000,"id":243509},{"price":3700000,"id":321938}]],["43.520132590942026,39.851103834807894",[{"price":1300000,"id":318729}]],["43.54209058208866,39.81488010644532",[{"price":110288470,"id":5501}]]];


ymaps.ready(function () {

	var map = new ymaps.Map("map", {
        center: [43.5809940000232, 39.72683899999996],
        zoom: 13,
        behaviors: ["default", "scrollZoom"],
        controls: ['fullscreenControl', 'zoomControl', 'rulerControl']
    },{
        suppressMapOpenBlock: true,
        suppressObsoleteBrowserNotifier: true
    });

    var objectManager = new ymaps.ObjectManager();
    var objectManagerCollection = {"type": "FeatureCollection", "features": []};
    
	var priceBalloonLayout = ymaps.templateLayoutFactory.createClass('<div class="popover top"><div class="arrow"></div><div class="popover-inner">$[[options.contentLayout observeSize]]</div></div>',
            {
                build: function () {
                    this.constructor.superclass.build.call(this);
                    this._$element = $('.popover', this.getParentElement());
                    this.applyElementOffset();
                   ...