JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1.73/?lang=ru_RU"></script>
<div id="cities"></div>
<div id="map"></div>

CSS

body {
  margin: 0;
}

#map {
  height: calc(100vh - 100px);
}

JavaScript

function initMap() {
  const map = new ymaps.Map('map', {
    center: cities[0].coord,
    zoom: 9,
  });

  markersData.map(({ coord, ...n }) => new ymaps.Placemark(coord, {
    ...n,
    hintContent: n.balloonContentHeader,
  }, {
    iconLayout: 'default#image',
    iconImageHref: 'https://fcxmsk.ru/myIcon2.png',
    iconImageSize: [ 50, 50 ],
    iconImageOffset: [ -5, -38 ],
  })).forEach(n => map.geoObjects.add(n));


  document.querySelector('#cities').innerHTML = cities.map((n, i) =>
    `<div><a href="#11" class="goto" data-index="${i}">${n.name}</a></div>`
  ).join('');

  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('goto')) {
      e.preventDefault();

      const { coord, zoom } = cities[e.target.dataset.index];
      map.panTo(coord, {
        flying: 1,
      }).then(() => map.setZoom(zoom));
    }
  });
}

const cities = [
  { name: 'Москва',          coord: [ 55.753559, 37.609218 ], zoom: 11 },
  { name: 'Санкт-Петербург', coord: [ 59.938531, 30.313497 ], zoom: 11 },
  { name: 'Екатеринбург',    coord: [ 56.829748, 60.617435 ], zoom: 12 },
  { name: 'Одесса',          coord: [ 46.466444, 30.7058 ],   zoom: 13 },
];

const markersData = [
  {
    coord: [ 55.710631069039486, 37.77002549999995 ],
    balloonContentHeader: "Метро Кузьминки",
    balloonContentBody: "<img src='https://fcxmsk.ru/sites/all/themes/it/images/cont_icon1.png' class='icon'>Метро Кузьминки<br><img src='https://fcxmsk.ru/sites/all/themes/it/images/cont_icon2.png' class='icon'>Россия, Москва, Зеленодольская улица, 30 Книжный магазин второй этаж<br><img src='https://fcxmsk.ru/sites/all/themes/it/images/cont_icon3.png' class='icon'>тел: + 7 (965) 404-18-88, +7 (916) 586-53-43<br><img src='https://fcxmsk.ru/sites/all/themes/it/images/cont_icon4.png' class='icon'>График работы с 10:00 до 20:00 без выходных<br><img src='https://fcxmsk.ru/sites/all/themes/it/images/cont_bl1.jpg'>",
  },
  {
    coord: [ 55.70362106902144, 37.68349950000003 ],
...