JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=places&amp;language=en"></script>
<div class="row" style="margin:0 !important;border:0px dashed #ff0099;background-color:#E9E5DC;">
    <div class="col-sm-5" style="padding-right:0px;margin-top:17px;border:0px dashed #00ff00;">
        <div>		
            <div id="listingContainer" style="border:1px solid #C8C7CC;"><div id="listing"><table id="places" style="background-color:#fff;"> <!-- table-striped -->
            <td>
                <div class="loading-spinner" style="width: 200px; margin-left: -100px;">
                <div class="progress progress-striped active">
                <div class="progress-bar" style="width: 100%;"></div>
                </div>
                </div>
            </td></table></div></div>
        </div>
        <input id="lastPlaceClickedInput" name="lastPlaceClickedInput" placeholder="lastPlaceClickedInput" type="hidden" style="float:right;font-size:25px;">

    </div>
    <div class="col-sm-7" style="padding-right:0;margin-right:0;">
        <div>
            <div id="map_canvas" style="height:100%;">
                <div class="loading-spinner" style="width: 200px; margin-left: -100px;">
                <div class="progress progress-striped active">
                <div class="progress-bar" style="width: 100%;"></div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="reviewsPanel" style="display:none;"><table border="0" width="100%"><tr><td colspan="4">
<h1>Reviews</h1></td><td><a href="javascript:void();" onclick="toggle_off('reviewsPanel');toggle_off_slow('theReviews');" style="float:right;">hide</a>
</td></tr></table></div>
<div id="theReviews"></div>
<div id="directionsPanel">
<div style="width:100%;position:relative;float:left;background-color:#ffffff;z-index:2;padding-right:5px;">
<form action="#">
<table border="1" width="100%"><tr><td colspan="4">
Directions </td><td><a...

CSS

#listing {
float:left;
  width: 105%;
  min-width:250px;
  height: 430px;
  overflow: auto;
  cursor: pointer;
  border:0;
}
#listingContainer{
float:left;
  width: 50%;
  min-width:240px;
  max-width:443px;
  height: 430px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid green;
}
#map_canvas {
    float:left;
    width: 48%;
    min-width:240px;
    height: 100%;
    min-height:500px;
    border:1px dashed red;
}
#controls{
  width: 200px;
  position: absolute;
  top: 0px;
  left: 400px;
  height: 60px;
  padding: 5px;
  font-size: 12px;
}
.placeIcon {
  width: 16px;
  height: 16px;
  margin: 2px;
}
#places {
  font-size: 10px;
  border-collapse: collapse;
  text-align:center;
}
#locationField {
  width: 400px;
  height: 25px;
}
#autocomplete {
  width: 400px;
}
.rating_bar{
  width: 119px;
  margin-top:8px;
  background: url(../../images/empty-star.png) 0 0 repeat-x;
}
.rating_bar div{
  height:30px;
  background: url(../../images/filled-star.png) 0 0 repeat-x;
}

.markerNumBubble{
    height:20px;
    width:20px;
    text-align:center;
    border:1px solid #000;
    margin-right:4px;
    margin-left:4px;
}


.markerNumAbsBubble{
    position:absolute;
    height:20px;
    width:20px;
    line-height:18px;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    margin-left:4px;
}

.marginTop5{
    margin-top:5px;
}

.roundIt20{
border-radius:20px;
-o-border-radius:20px;
-icab-border-radius:20px;
-khtml-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
behavior:url('../border-radius.htc');
}

ui-li-thumb-IW {
    border: 1px solid #C8C7CC;
}

thumbContainer{
    background-color:#404040;
    background:#404040;
}
.ui-li-thumb, .ui-li-icon {
    left:0;
    top: 0;
    height:100px;
    margin:0;
    margin-right:0px;
    margin-left:0px;
    width:134px;
    background-position: center center;
    background-size: cover;
    border-right: 1px solid #C8C7CC;
   ...

JavaScript

var loc,map,places,placesService,directionsDisplay,directionsService,iw,autocomplete,markers=[],categoria,bubbleIcon;
var highestZIndex = 0;
var lastPlaceClicked = "";
var newPlaceClicked= "";

var catz ={
all:{class:'greyBlue',color:'9BC6CC',font:'000',icon:'clip-globe'},
// online_only:{class:'onlineGreen',color:'00ff00',font:'000',icon:'clip-circle-2 onlineGreen'},
accounting:{class:'brownSafari',color:'CC9966',font:'000',icon:'clip-balance'},
amusement_park:{class:'pink',color:'ff0099',font:'000',icon:'clip-wave-2'},
aquarium:{class:'darkBlue',color:'364F6A',font:'000',icon:'fa fa-weibo fa-flip-horizontal'},
art_gallery:{class:'violet',color:'CC99CC',font:'000',icon:'clip-pictures'},
bank:{class:'brownSafari',color:'CC9966',font:'000',icon:'clip-balance'},
beauty_salon:{class:'pink',color:'ff0099',font:'000',icon:'clip-eye'},
bicycle_store:{class:'orange',color:'E6674A',font:'000',icon:'clip-cogs'},
bowling_alley:{class:'black',color:'000',font:'fff',icon:'fa fa-circle'},
campground:{class:'darkGreen',color:'3D9400',font:'000',icon:'clip-forrst'},
car_dealer:{class:'yellow',color:'FFB848',font:'000',icon:'fa fa-truck'},
car_rental:{class:'yellow',color:'FFB848',font:'000',icon:'fa fa-truck'},
car_repair:{class:'yellow',color:'FFB848',font:'000',icon:'fa fa-truck'},
car_wash:{class:'yellow',color:'FFB848',font:'000',icon:'fa fa-truck'},
dentist:{class:'darkCyan',color:'009999',font:'000',icon:'clip-inject'},
doctor:{class:'darkCyan',color:'009999',font:'000',icon:'fa fa-stethoscope'},
electrician:{class:'greenBlue',color:'99CCCC',font:'000',icon:'clip-bulb'},
embassy:{class:'brownSafari',color:'CC9966',font:'000',icon:'fa fa-flag'},
finance:{class:'brownSafari',color:'CC9966',font:'000',icon:'clip-balance'},
food:{class:'green',color:'a8e52f',font:'000',icon:'fa fa-cutlery'},
general_contractor:{class:'greenBlue',color:'99CCCC',font:'000',icon:'fa fa-home'},
gym:{class:'blue',color:'428bca',font:'000',icon:'fa...