JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body,
body *{
  margin: 0;
  padding: 0;
}

#map {
  width: 100vw; 
  height: 100vh;
}

JavaScript

ymaps.ready(function () {
  var map = new ymaps.Map('map', {
    center: [55.77, 37.70],
    zoom: 11
  });
  
  var night = 'islands#nightCircleIcon';
  var red   = 'islands#redCircleIcon';
  var green = 'islands#greenCircleIcon';
  
  map.geoObjects.add(new ymaps.Placemark([55.81, 37.65], {}, {preset: night, cursor: 'sw-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.81, 37.75], {}, {preset: night, cursor: 'ne-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.73, 37.65], {}, {preset: night, cursor: 'se-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.73, 37.75], {}, {preset: night, cursor: 'nw-resize'}));
  
  map.geoObjects.add(new ymaps.Placemark([55.80, 37.66], {}, {preset: red, cursor: 'nesw-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.80, 37.74], {}, {preset: red, cursor: 'nwse-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.74, 37.66], {}, {preset: red, cursor: 'nesw-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.74, 37.74], {}, {preset: red, cursor: 'nwse-resize'}));
  
  map.geoObjects.add(new ymaps.Placemark([55.81, 37.70], {}, {preset: green, cursor: 'col-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.77, 37.75], {}, {preset: green, cursor: 'row-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.73, 37.70], {}, {preset: green, cursor: 'col-resize'}));
  map.geoObjects.add(new ymaps.Placemark([55.77, 37.65], {}, {preset: green, cursor: 'row-resize'}));
})