JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<div class="hero-unit">
    <div class="container">
        <div id="YMapsID"></div>
    </div>
</div>

CSS

#YMapsID {

text-shadow: 0 0px 0px;

            width: 950px;
            height: 420px;
        };

JavaScript

ymaps.ready(function () {
    
    var myMap = new ymaps.Map('YMapsID', {
        center: [55.751574, 37.573856],
        zoom: 10,
        controls: [],
    }, {
//restrictMapArea: true,
        maxZoom: 15,
        minZoom: 10
    });


     myMap.controls


.add(new ymaps.control.FullscreenControl({options: {float: 'none', position: {right: 10, top: 70}}}))
    
    .add(new ymaps.control.ZoomControl({options: {position: {right: 10, top: 110}}}))



  .add(new ymaps.control.SearchControl({options: {boundedBy: [[55.916046,37.293574],[55.563064,37.912929]], strictBounds: true,  zoom: 9, float: 'none', position: {left: 10, top: 10}}}))  
    


});