JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Примеры. Добавление круга на карту.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--
        Подключаем API карт 2.x
        Параметры:
          - load=package.full - полная сборка;
	      - lang=ru-RU - язык русский.
    -->
    <script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);

        function init () {
            var myMap = new ymaps.Map("map", {
                    center: [55.76, 37.64],
                    zoom: 10
                }),
                // Создаем круг
                myCircle = new ymaps.Circle([
                    // Координаты центра круга
                    [55.76, 37.60],
                    // Радиус круга в метрах
                    15000
                ]);

            // Добавляем круг на карту
            myMap.geoObjects.add(myCircle);
        }
    </script>
</head>

<body>
<h2>Добавление круга на карту</h2>

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

</html>