JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-migrate-3.3.0.min.js"></script>
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
</head>
<body>
<div id="map" class="map"></div>
  
</body>
</html>

CSS

body {
  margin:30px;
}
.map {
  width: 1920px;
  height: 370px;
  position: relative;
}

.map:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: url(http://galiy-web.ru/primorie/images/bg/map_frame_bg.png) no-repeat;
  z-index: 2;
  pointer-events: none;
}

JavaScript

ymaps.ready(init);
var myMap,
    myPlacemark;

// Инициализация карты
function init() {

  myMap = new ymaps.Map("map", {
    center: [44.496141, 34.162030],
    zoom: 17,
    controls: []
  });

  // 1 метка
  myPlacemark = new ymaps.Placemark(
    [44.496141, 34.162030], {}, {
      // Иконка кластера
      iconLayout: 'default#image',
      iconImageHref: 'images/icons/map_pin.svg',
      clusterDisableClickZoom: true,
      hideIconOnBalloonOpen: false
    }
  );

  var myClusterer = new ymaps.Clusterer({
    clusterDisableClickZoom: true
  });
  myMap.geoObjects.add(myPlacemark);

  myMap.behaviors.disable('scrollZoom');
}