JSFiddle - React, Tailwind, and code Playground

CSS

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,cyrillic);

* {
	padding:0;
	margin:0;
}
body {
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
}
.metka-map {
	width:30px;
	height:30px;
	background:url(../images/metka.png) no-repeat;
	position:relative;
	margin-left:-5px;
}
.metka-nomer {
	position:absolute;
	top:3px;
	left:0;
	font-size:11px;
	color:#ffffff;
	text-align:center;
	width:29px;
	height:15px;
}
.balun-blok {
	position:relative;
	padding:5px;
}
.balun-blok-title {
	margin-bottom:4px;
	font-size:18px;
	font-weight:bold;
	color:#C6002D;
	width:100%;
	min-height:12px;
	position:relative;
	float: right;
	width:50%;
	font-family: 'Open Sans', sans-serif;
}

.balun-blok-title span{
	display:block;
	float:left;
	width:100%;
}
.balun-blok-image {
	position:relative;
	display: block;
	margin-right:5px;
}
.balun-blok-image:after {
	display:block;
	content:'';
	clear:both;
	width:100%;
}
.balun-blok-image > img{
	display:block;
	float:left;
}
.balun-blok-image > .y-map{
	display:block;
	float:left;
	margin-left:10px;
}
.balun-blok-image-a, .balun-blok-image-b {
	position:absolute;
	top:0;
	left:5px;
	font-size:36px;
	color:#fff;
	font-weight:bold;
	text-shadow:0 1px 5px #000000;
	display:none;
}
.map-form {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	padding:10px 10px;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	top:0;
	right:0;
	width:320px;
	height:550px;
	overflow-y:auto;
	overflow-x:hidden;
	float:right;
	z-index:9;
	margin-top: 50px;
}
.map-map {
	width:100%;
	min-width:1200px;
	float:left;
	position:relative;
}

.form-map-input{
	padding:15px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	display:block;
	position:relative;
	overflow:hidden;
	overflow-y: auto;
	height:395px;
	background:#F4F4F4 url(../images/ten-bloka.png) repeat-x...

JavaScript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>КАРТА БИБОРДОВ</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<!-- STYLE -->
<link href="template/css/map-style2.css" rel="stylesheet" type="text/css" media="all" />
<link href="template/css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="template/css/style-modal.css" rel="stylesheet" type="text/css" media="all">
<link href="template/css/animate.css" rel="stylesheet" type="text/css" media="all">
<!-- STYLE -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="template/js/autoresize.jquery.min.js"></script> 


</head>

<body>

<!-- SCRIPTS MAP --> 
<script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script> 
<script type="text/javascript">
    ymaps.ready(init);
    var myMap;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [51.5651, 46.0634],
            zoom: 12,
			behaviors: ['default', 'scrollZoom']
        });
	myMap.options.set('scrollZoomSpeed', 2.6);
    /* UPRAVLENIE*/
	myMap.controls
        // Кнопка изменения масштаба.
        .add('zoomControl', { left: 5, top: 50 })
        // Список типов карты
        .add('typeSelector', { left: 35, top: 50 })
        // Стандартный набор кнопок
        .add('mapTools', { left: 5, bottom: 5 })
		// Строка поиска
        .add('searchControl', { right: 10, top: 10 });
	
	
	// Обработка события, возникающего при щелчке
    // левой кнопкой мыши в любой точке карты.
    // При возникновении такого события откроем балун.
    myMap.events.add('click', function (e) {
        if (!myMap.balloon.isOpen()) {
            var coords = e.get('coordPosition');
            myMap.balloon.open(coords, {
                contentHeader:'Координаты щелчка:',
                contentBody:[
                   ...