JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            iconContent: 'test',
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/icon_customImage/images/myIcon.gif',
            // Размеры метки.
            iconImageSize: [30, 42],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-3, -42],
            iconContentLayout: ymaps.templateLayoutFactory.createClass('<div style="margin-top:-20px">{{ properties.iconContent }}</div>')
        });

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