JSFiddle - React, Tailwind, and code Playground

HTML

<head>
		<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
		<link rel="stylesheet" href="css/style.css">
    	<meta charset="utf-8">
    	<title>1</title>
    </head>
    <body>
		<div class="map" id="map"></div>
		<script	src="js/map.js"></script>
	</body>

CSS

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;	
    font-weight: 300;
    font-style: normal;
	color: #283136;
	line-height: 22px;
	background: #ffffff;
	min-width: 900px;
	margin: 0;
	padding: 0;
}

.map {
	width: 600px;
	height: 400px;
	filter: grayscale(1);
}

JavaScript

ymaps.ready(init);
   
var myMap,
	mayPlacemark;

function init() {     
    myMap = new ymaps.Map("map", {
	center: [45.04, 38.96], 
    zoom: 15
	});

	myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
		content: "nёrd\'s", 
		balloonContent: 'Nerds'
	}, {
		iconLayout: 'default#image',
		iconImageHref: 'img/bullet.png',
		iconImageSize: [220, 180],// Размеры метки.
		// Смещение левого верхнего угла иконки относительно
        // её "ножки" (точки привязки).
		//iconImageOffset: [-3, -42],
	});

	myMap.geoObjects.add(myPlacemark);
}