JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

</style> <script type="text/javascript" src="https://yandex.st/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="https://api-maps.yandex.ru/2.1.18/?lang=ru_RU&mode=debug"></script> <style> html, body {
    margin: 0;
    padding: 0;
}
html, body, #map {
    width: 100%;
    height: 100%;
}

JavaScript

function randomColor(){
	var colors = [ "#ff8000", "#0080ff", "#8000ff" ];
  return colors[Math.floor(Math.random() * colors.length)];
}

ymaps.ready(function(){

    var mapCenter = [55.755381, 37.619044];
    var map = new ymaps.Map('map', {
        center: mapCenter,
        zoom: 10,
        controls: []
    });
    
    var places = [], bounds = map.getBounds();
    
    var generateObject = function(id, bounds){
    	var coords = [
      	Math.random() * (bounds[1][0] - bounds[0][0]) + bounds[0][0],
        Math.random() * (bounds[0][1] - bounds[1][1]) + bounds[1][1]
      ];
      return {
      	type: "Feature",
        id: id,
        geometry: {
        	type: "Point",
          coordinates: coords
        },
        options: {
        	iconColor: randomColor()
        }
      };
    }
    
    var objectManager = new ymaps.ObjectManager({
    	clusterize: true,
      clustererIconLayout: "default#pieChart"
    });
    
    for (var i = 0; i < 100; i++) {
    	objectManager.add(generateObject(i, bounds));
    }
    
    map.geoObjects.add(objectManager);
    
});