JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=release"></script>
<div id="map" class="map">

CSS

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

JavaScript

var map;
        var BalloonContentLayout;

        ymaps.ready(init);

        function init() {
          map = new ymaps.Map('map', {
            center: [54.8711, 83.1459],
            zoom: 9,
            controls: ['smallMapDefaultSet']
          });
          map.controls.remove("searchControl");
          map.controls.remove("geolocationControl");
          map.controls.remove("fullscreenControl");

          BalloonContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="margin: 3px;">' +
            '<b>{{properties.task}}</b><br />' +
            '<button id="take-button"> Взять задание </button>' +
            '</div>', {

              build: function() {
                BalloonContentLayout.superclass.build.call(this);
                $('#take-button').bind('click', this.onCounterClick);
              },

              clear: function() {
                $('#take-button').unbind('click', this.onCounterClick);
                BalloonContentLayout.superclass.clear.call(this);
              },

              onCounterClick: function() {
                console.log("task take click");
                this.events.fire('userclose');
              }
            });
            
            var mark = new ymaps.Placemark([54.8711, 83.1459], {
              task: "Example",
              hintContent: "Content",
              iconContent: 2
            }, {
              balloonContentLayout: BalloonContentLayout,
              balloonPanelMaxMapArea: 0
            });
            map.geoObjects.add(mark);
        }