JSFiddle - React, Tailwind, and code Playground

by Trallya

HTML

<div id="tabs" style="width: 100%;">
<ul>
 	<li><a href="#tab-2">Склад в Обнинске</a></li>
 	<li><a href="#tab-1">Склад в Москве</a></li>
</ul>
<div id="tab-2" style="width: 100%; height: 550px; padding: 0;"></div>
<div id="tab-1" style="width: 100%; height: 550px; padding: 0;"></div>
</div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
  <script src="//yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
    <script src="//yandex.st/jquery-ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="//yandex.st/jquery-ui/1.8.23/themes/humanity/jquery.ui.all.min.css" type="text/css"/>
<style>

JavaScript

ymaps.ready(init);

var myMap;

function init () {
    $('#tabs').tabs();
    $('#tabs').bind('tabsshow', function (event, ui) {
        myMap.container.fitToViewport();
    });
}
ymaps.ready(['DeliveryCalculator']).then(function init () {
    myMap = new ymaps.Map('tab-2', {
            center: [55.149402, 36.623880],
            zoom: 12,
            type: 'yandex#map',
            controls: []
        }),
        searchFinishPoint = new ymaps.control.SearchControl({
            options: {
              useMapBounds: true,
              noCentering: true,
              noPopup: true,
              noPlacemark: true,
              placeholderContent: 'Адрес конечной точки',
              size: 'large',
              float: 'none',
              position: { left: 10, top: 14 }
            }
        }),
        calculator = new ymaps.DeliveryCalculator(myMap);
        calculator.setStartPoint([55.149402, 36.623880]);

    myMap.controls.add(searchFinishPoint);

    searchFinishPoint.events
    .add('resultselect', function (e) {
            var results = searchFinishPoint.getResultsArray(),
                selected = e.get('index'),
                point = results[selected].geometry.getCoordinates();

            // Задаем конец маршрута.
            calculator.setFinishPoint(point);
        })
        .add('load', function (event) {
            // По полю skip определяем, что это не дозагрузка данных.
            // По getResultsCount определяем, что есть хотя бы 1 результат.
            if (!event.get('skip') && searchFinishPoint.getResultsCount()) {
                searchFinishPoint.showResult(0);
            }
        });
});
ymaps.modules.define(
    'DeliveryCalculator',
    ['util.defineClass'],
    function (provide, defineClass) {
        /**
         * @class DeliveryCalculator Расчет стоимости доставки.
         * @param {Object} map    Экземпляр карты.
         */
        function DeliveryCalculator (map, finish) {
            this._map = myMap;
      ...