JSFiddle - React, Tailwind, and code Playground

HTML

<title>Index</title>
        <link href="/Content/site.css" rel="stylesheet" />
        <script src="/Scripts/modernizr-2.6.2.js"></script>
        <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
    
    <body>
        
        <div id="map" style="width: 1000px; height: 600px"></div>
        <script type="text/javascript">
            ymaps.ready(init);
            var myMap;

            function kazanMap() {
                return new ymaps.Map("map", {
                    center: [55.832329, 49.034276],
                    zoom: 11,
                    controls: ['geolocationControl']
                }, {
                    balloonMaxWidth: 200
                });
            }

            function addPlacemark(coords, text) {
                myGeoObject = new ymaps.GeoObject({
                    geometry: {
                        type: "Point",
                        coordinates: coords
                    },
                    properties: {
                        hintContent: document.getElementById('placemarkText').value
                    }

                });

                myMap.balloon.close();
                myMap.geoObjects.add(myGeoObject);

            }

            function init() {
                myMap = kazanMap();
                myMap.events.add('click', function(e) {
                    if (!myMap.balloon.isOpen()) {
                        var coords = e.get('coords');
                        myMap.balloon.open(coords, {
                            contentHeader: 'Введите название метки:',
                            contentBody: '<input type="text" size="20" id="placemarkText">',
                            contentFooter: '<button onclick="addPlacemark([' + coords + '])">Создать метку</button>'
                        });
                    } else {
                        myMap.balloon.close();
                    }
                });

            }
        </script>
        
   
    </body>

</html>