JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<script src="http://api.yandex.ru/maps/jsbox/examples/maps/ru/geolocation/geolocation_service.js" type="text/javascript"></script>
</head>
<body>
    <!-- HEADER -->
    <header>
        	<h1>Peepee</h1>

        <div class="rightheader">	<a href="./m">Мобильная версия</a> | <a href="javascript:showAddForm();">Добавить в базу</a> | <a href="javascript:showHelpForm();">Помочь проекту</a>

        </div>
    </header>
    <!-- Add new form -->
    <div class="addnewform">
        <div class="menuitem">
            <div class="menuitemheader">Добавить туалет в базу</div>
            <div class="menuitemcontent">
                <form method="POST" action="./assets/php/addnew.php" target="addnewresult" accept-charset="UTF-8">Тип:
                    <select name="type">
                        <option value="1">Бесплатный общественный</option>
                        <option value="2">Платный общественный</option>
                        <option value="3">Туалет в заведениях</option>
                        <option value="4">Туалет в организациях</option>
                    </select>
                    <br/>
                    <br/>Комфорт:
                    <select name="comf" id="addcomf">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                    <br/>
                    <br/>Местоположение, адрес, организация или заведение:
               ...

CSS

* {
    padding: 0px;
    margin: 0px;
    max-height: 650px;
    font-size: 14px;
    font-family:"Consolas", Arial;
}
header {
    padding: 10px 5px;
    right: 0px;
    height: 35px;
    background-color: #777777;
    color: #FFFFFF;
    font-size: 20px;
    box-shadow: 0px 3px 3px #777777;
    -webkit-box-shadow: 0px 3px 3px #777777;
    -moz-box-shadow: 0px 3px 3px #777777;
}
.rightheader {
    position: absolute;
    display: block;
    padding-top: 20px;
    height: 26px;
    width: 500px;
    top: 0px;
    right: 0px;
}
.rightheader a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dotted #FFFF00;
}
.container {
    bottom: 0px;
    display: block;
    top: 60px;
    width: 100%;
    height: auto;
}
.menu {
    bottom: 0px;
    display: block;
    position: absolute;
    left: 0px;
    top: 60px;
    width: 300px;
    height: auto;
    background-color: #FFFFFF;
}
.menuitem {
    width: auto;
    margin: 7px;
    padding: 5px;
    background-color: #777777;
    border-radius: 15px 15px 10px 10px;
    box-shadow: 2px 2px 10px #000000;
    -webkit-box-shadow: 2px 2px 10px #000000;
    -moz-box-shadow: 2px 2px 10px #000000;
}
.menuitemheader {
    width: auto;
    margin: 5px;
    padding: 2px 10px;
    background-color: #DFBF10;
    color: #000;
    border-radius: 8px;
    -moz-box-shadow:0 2px 2px #000;
    -webkit-box-shadow:0 2px 2px #000;
    box-shadow: 0 2px 2px #000;
}
.menuitemcontent {
    margin: 3px 10px;
    color: #FFFFFF;
    font-size: 12px;
}
.menuitemcontent a {
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dotted #FFFF00;
}
.menuitemcontent a:hover, a:visited {
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px dashed #FFFF00;
}
.centered {
    text-align: center;
}
#map {
    position: relative;
    margin: 20px;
    width: 1009px;
    height: 450px;
}
.mapcontainer {
    position: absolute;
    bottom: 0px;
    left: 300px;
   ...

JavaScript

var myMap;
var myCollection;
var myCoords;
var itsme;
var itsmecollection;

$(document).ready({

});

ymaps.ready(function () {
    myCollection = new ymaps.GeoObjectCollection();
    itsmecollection = new ymaps.GeoObjectCollection();

    myCoords = [43.250296, 76.922672];
    myMap = new ymaps.Map('map', {
        center: myCoords,
        zoom: 13,
        behaviors: ['drag', 'scrollZoom']
    }, {})

    myMap.controls.add('scaleLine');
    myMap.controls.add('zoomControl', {
        top: 75,
        left: 5
    });

    var button = new ymaps.control.Button({
        data: {
            image: 'http://noc.to/images/redPin-small.png',
            content: 'Геолокация',
            title: 'Нажмите, чтобы найти ваше местоположение',
            size: [10, 10]
        }
    }, {
        selectOnClick: false
    });
    button.events.add('click', function () {
        centerByLocation();
    });
    myMap.controls.add(button);


    showMapAt();
    myMap.events.add('dblclick', function (e) {
        myCoords = e.get('coordPosition');
        showMapAt();
    });

    myMap.events.add('click', function (e) {
        var clickedcoords = e.get('coordPosition');
        $("#addnewcoordslat").val(clickedcoords[0]);
        $("#addnewcoordslong").val(clickedcoords[1]);
    });

    $("#showfree").click(searchFilter);
    $("#showpay").click(searchFilter);
    $("#showcourt").click(searchFilter);
    $("#showorg").click(searchFilter);
    $("#mincomf").change(searchFilter);
    $("#clearfilterlink").click(clearFilter);
});

function showMapAt() {
    itsmecollection.removeAll();

    var itsme = new ymaps.Placemark(
    myCoords, {}, {
        iconImageHref: '//api.yandex.ru/maps/jsbox/examples/maps/ru/geolocation/images/geolocation.png',
        iconImageSize: [24, 24],
        iconImageOffset: [-12, -12]
    });

    itsmecollection.add(itsme);
    myMap.geoObjects.add(itsmecollection);

    searchFilter();
}

function centerByLocation() {
    var service = new...