JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

<div id="map"></div>

CSS

body {
  padding: 0px;
  margin: 0;
}

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

.placemark {
  border: 5px solid black;
  background-color: yellow;
  color: black;
  padding: 2px 5px;
  font: bold 40px monospace;
  white-space: nowrap;
  position: absolute;
}

JavaScript

ymaps.ready(function() {
  const map = new ymaps.Map('map', {
    zoom: 9,
    center: [ 55.751244, 37.618423 ],
    controls: [],
  });

  ymaps.layout.storage.add('xxx#placemark', ymaps.templateLayoutFactory.createClass(`
    <div class="placemark">{{ properties.text }}</div>
  `));

  const objectManager = new ymaps.ObjectManager({});

  objectManager.add({
    type: 'FeatureCollection',
    features: [
      [ [ 56.0, 36.9 ], 'hello, world!!' ],
      [ [ 55.8, 37.6 ], 'fuck the world' ],
      [ [ 55.6, 37.3 ], 'fuck everything' ],
    ].map(([ coordinates, text ], i) => ({
      type: 'Feature',
      id: i,
      geometry: {
        type: 'Point',
        coordinates,
      },
      properties: {
        text,
      },
      options: {
        iconLayout: 'xxx#placemark',
      },
    })),
  });

  map.geoObjects.add(objectManager);
});