JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div>
    <div class="my_demo">
        demo:
        <div class="my_mark" id="my_demo" style="left: 50px; top: 100px">
            <svg class="bubble" viewBox="0 0 50 80">
                <polygon points="0,0 50,0 50,53 2,80 0,80"/>
                <text y="38" x="25">15%</text>
            </svg>
        </div>
        <button onclick="toggle_demo2()">Toggle Demo</button>
        <button onclick="toggle_map()">Toggle Map</button>
    </div>
    <br/>
    <div id="mymap" class="my_map"></div>
</div>

CSS

.my_demo {
    width: 300px;
    height: 200px;
    border: solid blue 1px;
}

.my_map {
    width: 300px;
    height: 200px;
    border: solid red 1px;
}

.my_mark {
    position: absolute;
}

.my_mark .bubble {
    width: 34px;
    height: 55px;
    fill: blue;
}

.my_mark.hovered .bubble {
    width: 50px;
    height: 80px;
    margin-top: -25px;
}

.my_mark .bubble text {
    font-size: 18px;
    font-weight: 900;
    fill: #fff !important;
    text-anchor: middle;
}

.bubble {
    margin-top: 0;
    margin-left: 0;
    transition: width 200ms, height 200ms, margin-top 200ms, margin-left 200ms;
}

JavaScript

window.toggle_demo2 = function() {
    $("#my_demo").toggleClass('hovered');
};

var my_map;
var p1;
ymaps.ready(function() {
    my_map = new ymaps.Map('mymap', {
        center: [55.028936234826, 82.927810142519],
        zoom: 10,
        controls: []
    }, {});
    var template = ''
        + '<div class="my_mark {{properties.extra_css_class}}">'
        + '    <svg class="bubble" viewBox="0 0 50 80">'
        + '        <polygon points="0,0 50,0 50,53 2,80 0,80"/>'
        + '        <text y="38" x="25">{{properties.title}}</text>'
        + '    </svg>'
        + '</div>';
    p1 = new ymaps.Placemark([55.028936234826, 82.927810142519], {
            title: '15%',
            extra_css_class: ''
        }, {
            iconLayout: ymaps.templateLayoutFactory.createClass(template),
        });
    my_map.geoObjects.add(p1);
});

var is_p1_hovered = false;
window.toggle_map = function() {
    if(is_p1_hovered) {
        p1.properties.set({'extra_css_class': ''});
    } else {
        p1.properties.set({'extra_css_class': 'hovered'});
    }
    is_p1_hovered = !is_p1_hovered;
};