JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Примеры. Размещение карты на странице.</title>
    <!--
        Подключаем API карт
        Параметры:
          - load=package.full - основные компоненты;
	      - lang=ru-RU - язык русский.
	    Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)
    -->
    <script src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
</head>

<body>
    <div id="map" style="width:500px; height:400px"></div>
</body>

</html>

JavaScript

ymaps.ready(function() {
            map = new ymaps.Map('map', {
                center: [59.22, 39.89],
                zoom: 12,
                behaviors: ['default', 'scrollZoom']
            });
            
            // Создаем экземпляр класса ymaps.control.SearchControl
            var mySearchControl = new ymaps.control.SearchControl({
                resultsPerPage: 5,
                width: 300
            });
            
            map.controls.add(mySearchControl, {left: 50, top: 5})
                    .add("zoomControl", {top: 5})
                    .add("typeSelector");
        });