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%
}

h1 { margin: 0; padding: 0; }

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

.custom_layout {
    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=custom_layout><h1>{{data.header}}</h1><b>{{data.desc}}</b><i>{{data.footer}}</i></div>"
        ),            
        button = new ymaps.control.Button({
            data: {
                content: "Жмак-жмак"
            },
            options: {
                layout: ButtonLayout
            }
        }),
        placemark = new ymaps.Placemark(myMap.getCenter(), {
            header: 'заголовок',
            desc: 'Описание',
            footer: 'Подвал'
        });
    
    placemark.events.add('click', function (e) {
        var placemark = e.get('target');
        button.data.set({
            header: placemark.properties.get('header'),
            desc: placemark.properties.get('desc'),
            footer: placemark.properties.get('footer')
        });
    });
    
    myMap.geoObjects.add(placemark);
            
    myMap.controls
        .add(button, { position: { left: 0, top: 0 } })
        .add('zoomControl', { position: { left: 160, top: 50 } });
});