JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
        
.foo {
  color: red;
}

.bar {
  color: green;
}

JavaScript

ymaps.ready(function () {
    var myMap = new ymaps.Map(
        'map',
        {
            center: [55.751574, 37.573856],
            zoom: 9
        },
        {
            searchControlProvider: 'yandex#search'
        }
    );

    var placemarkContentLayout = ymaps.templateLayoutFactory.createClass(
        `<div class="map-placemark-container">
            <div class="map-placemark-small {{ options.moreClassesForGodClasses }}" data-placemark-id="$[properties.objectId]">
                <i class="icon-small icon-categories icon-categories-$[properties.categoryId]">$[properties.text]</i>
            </div>
        </div>`
    );

    var placemark = new ymaps.Placemark(
        [55.661574, 37.573856],
        {
            categoryId: '12',
            text: 'foobar'
        }, {
            iconLayout: 'default#imageWithContent',
            iconImageHref: '',
            iconContentLayout: placemarkContentLayout,
            iconMoreClassesForGodClasses: 'foo'
        }
    );

    setTimeout(function () {
        placemark.options.set('iconMoreClassesForGodClasses', 'bar')
    }, 3000);

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