JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
       
        /* Круглый макет метки */
        #circle_layout {
            background-color: white;
            position: absolute;
            left: -23px;
            top: -23px;
            width: 46px;
            height: 46px;
            border: 2px solid #225D9C;
            color: #225D9C;
            line-height: 46px;
            /* Это CSS свойство не будет работать в Internet Explorer 8 */
            border-radius: 50px;
        }

JavaScript

ymaps.ready(function () {
    var map = new ymaps.Map('map', {
        center: [55.7, 37.6],
        zoom: 10,
        controls: []
    });

    // Создание метки с круглой активной областью.
    var circleLayout = ymaps.templateLayoutFactory.createClass('<div id="circle_layout"></div>');

    var circlePlacemark = new ymaps.Placemark(
        [55.783202, 37.605584], {
            hintContent: 'Метка с круглым HTML макетом'
        }, {
            iconLayout: circleLayout,
            // Описываем фигуру активной области "Круг".
            iconShape: {
                type: 'Circle',
                // Круг описывается в виде центра и радиуса
                coordinates: [0, 0],
                radius: 25
            }
        }
    );
    map.geoObjects.add(circlePlacemark);
});