JSFiddle - React, Tailwind, and code Playground

by HappyCougar

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 mapCenter = ['44.59905921452486', '33.84991499934473'],
        myMap = new ymaps.Map('map', {
            center: mapCenter,
            zoom: 9,
            controls: []
        });

    var placemarks = [];

    var customItemContentLayout = ymaps.templateLayoutFactory.createClass([
      '<div>',
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>',
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>',
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>',
      '</div>'
    ].join(''));

    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        clusterBalloonPanelMaxMapArea: 0,
        clusterBalloonContentLayoutWidth: 350,
        clusterBalloonItemContentLayout: customItemContentLayout,
        clusterBalloonLeftColumnWidth: 120
    });

    var placemark0 = new ymaps.Placemark([44.56026, 33.46379], {
        balloonContentHeader: 'Участок даром в Престижной застройке Левая Гераклея ул. Византийская',
        balloonContentBody: '<img class="ya_maps_baloon_img" src="http://realty-elit.ru/images/osproperty/properties/357/medium/35714640698902bf3cfdb27670165f3c5ff084a3b35f5.jpg" alt="" />'
    });
    placemarks.push(placemark0);

    var placemark1 = new ymaps.Placemark([44.52848, 33.53301], {
        balloonContentHeader: 'Участок 7 км в жилом районе р-м с асфальтом 8 сот',
        balloonContentBody: '<img class="ya_maps_baloon_img" src="http://realty-elit.ru/images/osproperty/properties/356/medium/356146406958376770982a71c55b092a3428b5c5a28fa.jpg" alt="" />'
    });
    placemarks.push(placemark1);

    var placemark2 = new ymaps.Placemark([44.56478, 33.57622], {
        balloonContentHeader: 'Участок 8 соток в жилом кооперативе Сапун Гора',
        balloonContentBody: '<img class="ya_maps_baloon_img"...