JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&amp;mode=debug"></script>
<div id=map></div>

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

#map {
    width: 800px;
    height: 600px;
}

.my-button {
    background-color: white;
    width: 150px;
    height: 600px;
}

JavaScript

// Подробнее http://api.yandex.ru/maps/
ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.650625, 37.62708],
            zoom: 10,
            controls: []
        }),
        ButtonLayout = ymaps.templateLayoutFactory.createClass(
            "<div class=my-button>" +
                "{{data.content}}" +
                "</div>"
        ),            
        button = new ymaps.control.Button({
            data: {
                content: "Жмак-жмак"
            },
            options: {
                layout: ButtonLayout
            }
        }),
        placemark = new ymaps.Placemark(myMap.getCenter(), {
            desc: 'Placemark!'
        });
    
    placemark.events.add('click', function (e) {
        var placemark = e.get('target');
        button.data.set('content', placemark.properties.get('desc'));
    });
    
    myMap.geoObjects.add(placemark);
            
    myMap.controls
        .add(button, { position: { left: 0, top: 0 } })
        .add('zoomControl', { position: { left: 160, top: 50 } });
});