JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0.29/?load=package.full&amp;lang=ru-RU"></script>
<div class="hero-unit">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <p class="lead">Управление коллекцией геообъектов с помощью меню.</p>
                </div>
            </div>
            <div class="row-fluid">
                <div id="map" class="span8"></div>
				<div id="sidebar" class="well span4">
                    <ul class="nav nav-list">
                        <li id="group-1" class="nav-header"><span class="label label-important">Группа 1</span></li>
                        
                        <li id="group-2" class="nav-header"><span class="label label-success">Группа 2</span></li>
                        
                       
                       
                    </ul>
                </div>
            </div>
        </div>
    </div>

CSS

.hero-unit {
            background-color: #FFF;
        }
        .well {
            padding: 15px 0;
            height: 520px;
        }
        .label {
            cursor: pointer;
    text-decoration:underline;
        }
        #map {
            width: 600px;
            height: 520px;
        }

JavaScript

ymaps.ready(init);

        function init() {
            // Создание экземпляра карты.
            var myMap = new ymaps.Map('map', {
                center: [59.94172945, 30.33953074],
                zoom: 10
            });

			myMap.controls
        // Кнопка изменения масштаба.
        .add('zoomControl', { left: 5, top: 5 })
        // Список типов карты
        .add('typeSelector')
        // Стандартный набор кнопок
        .add('mapTools', { left: 35, top: 5 });




            // Эту группу не будем добавлять на карту, чтобы помещенные в нее геообъекты были не видны.
            hidden = new ymaps.GeoObjectCollection(),
            // Эту группу добавим на карту.
            visible = new ymaps.GeoObjectCollection(),



			// Упорядоченные коллекции с геообъектами.
            group1 = new ymaps.GeoObjectArray({
                properties: {
                    id: 'group-1',
                    name: 'Автомойки'
                }
            }, {
                preset: 'twirl#redIcon'
            }),
            group2 = new ymaps.GeoObjectArray({
                properties: {
                    id: 'group-2',
                    name: 'Шиномонтаж'
                }
            }, {
                preset: 'twirl#greenIcon'
            }),
            group3 = new ymaps.GeoObjectArray({
                properties: {
                    id: 'group-3',
                    name: 'Автосервис'
                }
            }, {
                preset: 'twirl#orangeIcon'
            }),
            group4 = new ymaps.GeoObjectArray({
                properties: {
                    id: 'group-4',
                    name: 'Дилеры'
                }
            });




			clusterer = new ymaps.Clusterer({
				preset: 'twirl#invertedVioletClusterIcons',
				groupByCoordinates: false,
				clusterDisableClickZoom: true
       		}),

            getPointData = function (index) {
            	return {
                	balloonContentBody: 'балун <strong>метки '...