JSFiddle - React, Tailwind, and code Playground

by abra

HTML

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>PriceHuntr</title>

    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,700,800italic,800,600italic,600,400italic,300italic,300&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://dl.dropbox.com/u/5624413/tmp/bootstrap/css/bootstrap.min.css">

    <!-- 960gs -->
    <link rel="stylesheet" href="http://dl.dropbox.com/u/5624413/tmp/960gs/css/reset.css" />
    <link rel="stylesheet" href="http://dl.dropbox.com/u/5624413/tmp/960gs/css/text.css" />
    <link rel="stylesheet" href="http://dl.dropbox.com/u/5624413/tmp/960gs/css/960.css" />

    <!-- Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
    <![endif]-->

  </head>
  <body>

    <!-- [ main container : start ] -->
    <div class="container container_12">

      <div class="grid_12" style="margin-top: 5px">
        <div id="header">
          <font color="#293134">Blalala</font>
        </div>
      </div>

      <div class="clear"></div>

      <div class="grid_12">
        <div>
          <form class="form-search">
            <input type="text" placeholder="Keywords" maxlength="100" size="100" style="width: 930px">
          </form>
        </div>
      </div>

      <div class="clear"></div>

      <div class="grid_12" style="margin-top: 10px">
        <b>You are searching: <span id="search_text">Lorem ipsum dolor sit amet</span></b>
      </div>

      <div class="clear"></div>

      <div class="grid_12" id="map-block"></div>

      <div class="clear"></div>

    </div>
    <!-- [ main container : end ] -->

    <!-- [...

CSS

body {
  font-family: 'Open Sans', 'Droid Sans', sans-serif;
}

#search_text {
    color: #208CC3;
  font-style: italic;
}

#search_count {
  color: #ff0033;
  font-style: italic;
}

#map-block { 
  width: 934px; 
  height: 100%; 
  margin-bottom: 25px; 
  margin-top: 10px; 
  border: 3px solid #ccc; 
  border-radius: 5px;
  display: none;
  position: absolute;
}    

#header {
  font-family: 'Lobster', cursive;
  font-size: 40px;
}

JavaScript

var map = L.map('map-block').setView([64.43422, 76.49068], 14);

L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
    key: '90e9a8797c9b4cdfbf73a1eaa7cc96ac',
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

L.marker([64.43451, 76.50797]).addTo(map);
L.marker([64.43527, 76.50722]).addTo(map);
L.marker([64.43479, 76.49282]).addTo(map);

var circle = L.circle([64.43486, 76.50574], 250, {
    color: '#49A339',
    clickable: false,
    fill: true,
    fillColor: '#49A339',
    weight: 1,
    fillOpacity: 0.1
}).addTo(map);

var popup = L.popup();

function onMapClick(e) {
    popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(map);
}

document.getElementById('map-block').style.display = 'block';
map.on('click', onMapClick);

$(document).ready(function() {
    $('#map-block').css({
        'height': (($(window).height()) - 200) + 'px'
    });
    map.invalidateSize(false);

    $(window).resize(function() {
        $('#map-block').css({
            'height': (($(window).height()) - 200) + 'px'
        });
        map.invalidateSize(false);
    });
});