JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//yandex.st/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//yandex.st/jquery/2.0.3/jquery.min.js"></script>
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=debug"></script>
<body>
    <div id="map"></div>
    <div id = 'custom-content' style='display:none;'>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum et fuga pariatur vitae voluptatem. Dolores eius in quidem. Aspernatur at cum dignissimos
	distinctio in ipsam modi, provident qui velit voluptatum.</p><p>Cum necessitatibus, repellendus! Asperiores aspernatur aut autem eligendi enim hic impedit
	in inventore ipsa, laudantium, libero minus nisi obcaecati officia placeat quod sed unde! Culpa enim excepturi quae saepe ut!</p><p>Accusantium aliquid
	animi assumenda blanditiis cum dolorem, ducimus eaque excepturi exercitationem, explicabo ipsa laboriosam magnam magni modi natus nulla quia quo saepe
	veritatis voluptas! Dignissimos dolore ipsa laboriosam quia sed!</p>
    </div>
</body>

CSS

#map {
            width: 600px;
            height: 600px;
        }
        .popover {
            display: block;
            max-width:400px;
        }
        .popover .close {
            position: absolute;
            right: 5px;
            top: 1px;
        }
        .btn {
            margin-top: 10px;
        }

JavaScript

ymaps.ready(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру.
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9,
            behaviors: ['default', 'scrollZoom']
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создание макета балуна на основе Twitter Bootstrap.
        MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="popover top">' +
                '<a class="close" href="#">&times;</a>' +
                '<div class="arrow"></div>' +
                '<div class="popover-inner">' +
                '$[[options.contentLayout observeSize minWidth=235 maxWidth=400 maxHeight=350]]' +
                '</div>' +
                '</div>', {
                build: function () {
                    this.constructor.superclass.build.call(this);

                    this._$element = $('.popover', this.getParentElement());

                    this.applyElementOffset();

                    this._$element.find('.close')
                        .on('click', $.proxy(this.onCloseClick, this));
                    
                    var that = this;
                    setTimeout(function(){
                    	$('#content-id').html($('#custom-content').html());
                    	that.events.fire('shapechange');
                    }, 200);
                    
                },
                clear: function () {
                    this._$element.find('.close')
                        .off('click');

                    this.constructor.superclass.clear.call(this);
                },
                onSublayoutSizeChange: function () {
                    MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

                    if(!this._isElement(this._$element)) {
                        return;
                    }

                    this.applyElementOffset();

                   ...