JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map" style="height:500px">map</div>

CSS

html, body, #map {
            width: 100%; height: 500px; padding: 0; margin: 0;
        }
.layper-circle-wrapper {
  position: relative;
}
.layer-circle,
.layer-circle-text {
  width: 100%;
  height: 100%;
  position: relative;
}
.layer-circle-text {
  top: -100%;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  font-size: 120%;
}
.layer-circle {
  opacity: 0.5;
  background-color: rgba(255, 207, 19, 0.75);
  border-radius: 50%;
}
.layer-handler {
  width: 16px;
  height: 16px;
  background-color: #FF0019;
  border-radius: 50%;
  cursor: ew-resize;
  border: 1px solid #6D4141;
  position: absolute;
  margin-top: -7px;
  margin-left: -7px;
  box-sizing: border-box;
  z-index: 100;
}
.layer-target-handle-inner {
    background-color: blue !important;
}
.layer-handler.layer-handler-top {
  top: 0%;
  left: 50%;
}
.layer-handler.layer-handler-right {
  top: 50%;
  left: 100%;
}
.layer-handler.layer-handler-bottom {
  top: 100%;
  left: 50%;
}
.layer-handler.layer-handler-left {
  top: 50%;
}
.input-toggle {
  display: none;
}
.input-toggle + LABEL {
  font-weight: bold;
  font-size: 18px;
  padding: 4px 0;
  cursor: pointer;
}
.input-toggle + LABEL I {
  display: none;
}
.input-toggle + LABEL I:first-child {
  display: inline-block;
}
.input-toggle + LABEL + DIV {
  display: none;
}
.input-toggle:checked + LABEL I {
  display: inline-block;
}
.input-toggle:checked + LABEL I:first-child {
  display: none;
}
.input-toggle:checked + LABEL + DIV {
  display: block;
}
#ToolBox {
  background-color: white;
  border: 1px solid grey;
  border-radius: 3px;
  color: #666666;
  position: relative;
}
#ToolBox LABEL {
  border: 1px solid #676760;
  display: inline-block;
  margin: 5px;
  border-radius: 3px;
  padding: 2px;
  box-shadow: 0px 1px 2px;
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0.2) 0, rgba(126, 126, 126, 0.4) 100%);
}
#ToolBox INPUT:checked + LABEL {
  box-shadow: none;
}
#InfoBox {
  position: absolute;
  background-color:...

JavaScript

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="layer-target-outer" style="width: {{properties.pixelDiameterOuter}}px; height:{{properties.pixelDiameterOuter}}px">' +               
                '<div class="layer-target-handle-outer"><span>{{properties.diameterOuter}}м</span></div>' +
                '<div class="layer-target layer-target-inner layer-target-new" style="width: {{properties.pixelDiameterInner}}px; height: {{properties.pixelDiameterInner}}px">' +
                '<div class="layer-target-handle"></div>' +
                '<div class="layer-target-handle-inner"><span>{{properties.diameterInner}}м</span></div>' +
                '<div class="layer-target layer-target-number" style="font-size: {{properties.pixelDiameterInner}}px; text-align: center">' +
                '{{properties.number}}</div>' +
                '</div>' + '</div>'
            ),
    // Создаем геообъект с типом геометрии "Точка".
        myGeoObject = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.8, 37.8]
            },
            // Свойства.
            properties: {
                // Контент метки.
                pixelDiameterOuter: 500,
                pixelDiameterInner: 300
            }
        }, {
            iconLayout: myLayout,
            pane: 'overlaps',
            iconOffset: [-250, -250]
            
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            //preset: 'islands#blackStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        });
    
    myMap.geoObjects.add(myGeoObject);
    
    window.setTimeout( function() {    
   ...