JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="myMap" style="width:100%; height:400px;"></div>

CSS

.left {float:left;}
.cluster_caption_text_block {width:149px; padding:10px 0 11px 3px; float:left; background:#ededed; border-top:2px solid #ededed; border-bottom:2px solid #ededed; color:#727272;}
span.cluster_caption_price {display:inline-block; width:94px; float:left; line-height:20px; font-size:16px;}
span.daymark {width:46px; float:left; height:13px; padding-left:9px; margin:4px 0 3px 0; background:url("/media/img/elements/daymark.png"); font-size:10px; line-height: 13px;}

ymaps.ymaps-b-cluster-tabs__menu-item.ymaps-b-cluster-tabs__menu-item_current_yes .cluster_caption_text_block {border-top:2px solid #49aa2d; border-bottom:2px solid #49aa2d;}
ymaps.ymaps-b-cluster-tabs__menu-item.ymaps-b-cluster-tabs__menu-item_current_yes .cluster_caption_right_active {width:8px; height:60px; float:left; background:url("/media/img/elements/cluster_caption_right_active.png") no-repeat;}
ymaps.ymaps-b-cluster-tabs__menu-item_current_yes {background:none; border-radius:0;}
ymaps.ymaps-b-cluster-tabs__menu-item {padding:0; margin-bottom:6px; border-radius:0; -webkit-border-radius:0;}
ymaps.ymaps-b-cluster-tabs__menu-item-text {color:#727272;}
ymaps.ymaps-b-cluster-tabs__menu-item span {color:#000;}

.pointer_event_none { pointer-events: none; }

JavaScript

var map;
var clusterer;
ymaps.ready(init);

function init() {
	map = new ymaps.Map("myMap", {
		center: [45.043241, 41.969065],
		zoom: 12,
		behaviors: ["default", "scrollZoom"],
        controls: ['typeSelector']
		}, {minZoom:11, maxZoom:16});
    var clusterNumbers = [2,10,100,1000];

    var customTemplate = ymaps.templateLayoutFactory.createClass('{{ properties.balloonContentBody|raw }}');

	clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom:true,
        gridSize: 128,
        clusterHideIconOnBalloonOpen:false,
        clusterOpenBalloonOnClick:false,
        clusterBalloonPanelMaxMapArea: 0,
        balloonContentLayoutHeight:285,
        clusterBalloonLeftColumnWidth:220,
        balloonContentLayoutWidth:390,
        geoObjectZIndexHover:200,
        clusterBalloonItemContentLayout: customTemplate
    });

	map.controls.add('zoomControl', {float: 'none', position: {right : 15, top: 120}});
    map.geoObjects.events.add('click', onClick);
    adding([{lat: 45.055665, id: 4, long: 41.933052}, {lat: 45.038661, id: 3, long: 41.984301}, {lat: 45.040929, id: 2, long: 41.983331}, {lat: 45.030247, id: 1, long: 41.978507}]);
}

/*Подгружаем контент при клике. На рабочем проекте через AJAX*/

function onClick(e) {
    var data = [{body: 'контент 1 ', caption: '<div class=pointer_event_none><img src="http://pampik.com/uploads/product/pic/30122013/slonik.jpg" class="left"><div class="cluster_caption_text_block"><span class="cluster_caption_price">1 500 000</span><span class="daymark">18 дней</span>Слоник</div></div>'}]
    
    var placemark = e.get('target'), ID = placemark.properties.get('ID');
    geoObjects = placemark.properties.get('geoObjects');
    if(geoObjects) {
        var obj_num = geoObjects.length;
        if(obj_num >= 5 && map.getZoom() <= 15) { map.setCenter(placemark.getBounds()[0] ,map.getZoom()+1, {checkZoomRange: true}); } else {
        clusterer.balloon.open(placemark);
        var objs = [];
        for(var i=0; i<obj_num;...