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 {
    margin: 0;
    padding: 0;
}
html, body, #map {
    width: 100%;
    height: 100%;
}
.ballon_header {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #708090;
}
.ballon_body {
    font-size: 18px;
    text-align: center;
}
.ballon_footer {
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #7D7D7D;
    color: #7D7D7D;
    margin-top: 10px;
}
.cluster_list {
    font-size: 16px;
    text-align: right;
    border-top: 1px solid #7D7D7D;
    color: #7D7D7D;
    margin-top: 10px;
}

JavaScript

ymaps.ready(function () {
    var mapCenter = [55.755381, 37.619044],
        map = new ymaps.Map('map', {
            center: mapCenter,
            zoom: 9,
            controls: []
        });

    // Создаем собственный макет с информацией о выбранном геообъекте.
    var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
    // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
    '<div class=cluster_list>{{properties.clusterCaption|raw}}</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>');

    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        // Устанавливаем режим открытия балуна. 
        // В данном примере балун никогда не будет открываться в режиме панели.
        clusterBalloonPanelMaxMapArea: 0,
        // Устанавливаем размер макета контента балуна (в пикселях).
        clusterBalloonContentLayoutWidth: 650,
        // Устанавливаем собственный макет.
        clusterBalloonItemContentLayout: customItemContentLayout,
        // Устанавливаем ширину левой колонки, в которой располагается список всех геообъектов кластера.
        clusterBalloonLeftColumnWidth: 240
    });

    // Заполняем кластер геообъектами со случайными позициями.
    var placemarks = [];
    for (var i = 0, l = 100; i < l; i++) {
        var placemark = new ymaps.Placemark(getRandomPosition(), {
            // Устаналиваем данные, которые будут отображаться в балуне.
            clusterCaption: 'clusterCaption ' + (i + 1),
            balloonContentHeader: 'Метка йцу №' + (i + 1),
            balloonContentBody: getContentBody(i),
            balloonContentFooter: 'Мацуо Басё'
        });
        placemarks.push(placemark);
    }

    clusterer.add(placemarks);
 ...