JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;onload=init&amp;debug=true"></script>
    <div id="map">map</div>

CSS

html, body, #map {
    width: 100%; height: 500px; padding: 0; margin: 0;
}
.hiding ymaps {
    transition: opacity 1s;
}
.hidden ymaps {
    opacity: 0;
}

JavaScript

window.init = function() {    
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }),
        handler = null,
        selectedPane = new ymaps.pane.MovablePane(myMap, { zIndex: 420}),
        collection = new ymaps.GeoObjectCollection(),
        showAll = function() {
            collection.each( function(item) {
                item.options.set('pane', 'places');
            });
            $(placesPane).removeClass('hidden');
            handler = null;
        },
        objects = [
            new ymaps.Placemark([55.684758, 37.738521]),
            new ymaps.Placemark([55.833436, 37.715175]),
            new ymaps.Placemark([55.687086, 37.529789]),
            new ymaps.Placemark([55.782392, 37.614924]),
            new ymaps.Placemark([55.642063, 37.656123]),
            new ymaps.Placemark([55.826479, 37.487208]),
            new ymaps.Placemark([55.694843, 37.435023]),
            new ymaps.Placemark([55.790139, 37.814052])
        ],
        placesPane = myMap.panes.get('places').getElement();
    myMap.panes.append('selected', selectedPane); 
    $(placesPane).addClass('hiding');
    myMap.geoObjects.add(collection);
    for(var i =0 ; i < objects.length; i++) 
        collection.add(objects[i]);    
    collection.events.add('click', function (event) {
        event.get('target').options.set('pane', 'selected');
        $(placesPane).addClass('hidden');
        if (handler) window.clearTimeout(handler);
        handler = window.setTimeout( showAll, 1000);        
    });
}