JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<div class="container">
      <div class="explore">
        <div class="mapView">
          <div id="mapCanvas" class="mapCanvas"></div>
        </div>
      </div>
    </div>

CSS

body {
	  margin: 0;
	}

	.container {
	  background: #3e3e3e;
	  position: relative;
	  min-width: 500px;
	  width: 100%;
	}

        .mapView {
          background: #fe3e3e;
          bottom: 0;
	  left:0;
	  position: fixed;
	  right: 0;
	  z-index: 100;
	  top: 0px;
	}

	.mapCanvas {
	  background: #3efe3e;
  	  height: 100%;
	  overflow: visible;
          position: relative;
	}

JavaScript

var myMap;

	// Дождёмся загрузки API и готовности DOM.
	ymaps.ready(init);

	function init () {
	    // Создание экземпляра карты и его привязка к контейнеру с
	    // заданным id ("map").
	    myMap = new ymaps.Map('mapCanvas', {
		// При инициализации карты обязательно нужно указать
		// её центр и коэффициент масштабирования.
		center:[55.76, 37.64], // Москва
		zoom:10
	    });

	    var margin = [50, 50, 50, 200],
	        setCenter = function(map, left, top) {
		   var oldPixelCenter = map.getGlobalPixelCenter();
		   
                   map.setGlobalPixelCenter([
		     oldPixelCenter[0] - left,
		     oldPixelCenter[1] - top,
		   ]);
	        },
  	        getBound = function (map, margin) {
	          var projection = map.options.get('projection'),
	              center = map.getGlobalPixelCenter(),
	              zoom = map.getZoom(),
	              size = map.container.getSize(),
	              lowerCorner = projection.fromGlobalPixels([
	                center[0] - size[0] / 2 + margin[3],
	                center[1] + size[1] / 2 - margin[2]
	              ], zoom),
                      upperCorner = projection.fromGlobalPixels([
                        center[0] + size[0] / 2 - margin[1],
                        center[1] - size[1] / 2 + margin[0]
                      ], zoom);

	          return [lowerCorner, upperCorner];
	        };

            setCenter(myMap, margin[3] / 2, margin[0] / 2);
	    var bound = getBound(myMap, margin), 
	        myPlacemark = new ymaps.Placemark(bound[0], {iconContent: 'lowerCorner'}),
	        myPlacemark2 = new ymaps.Placemark(bound[1], {iconContent: 'upperCorner'});

	    myMap.geoObjects.add(myPlacemark);
	    myMap.geoObjects.add(myPlacemark2);
	}