JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
</head>
<body>

<style>
body {
  font-size: 0.8em;
}

#map-container, #side-container, #side-container li {
  float: left;
}

#map-container {
  width: 500px;
  height: 600px;
}

#side-container {
  border: 1px solid #bbb;
  margin-right: 5px;
  padding: 2px 4px;
  text-align: right;
  width: 260px;
}
#side-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#side-container li input {
  font-size: 0.85em;
  width: 210px;
}
#side-container .dir-label {
  font-weight: bold;
  padding-right: 3px;
  text-align: right;
  width: 40px;
}

#dir-container {
  height: 525px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}
#dir-container table {
  font-size: 1em;
  width: 100%;
}
</style>

<div id="side-container">
  <ul>
    <li class="dir-label">From:</li>
    <li><input id="from-input" type=text value="345 Spear St, San Francisco, CA"/></li>
    <br clear="both"/>
    <li class="dir-label">To:</li>
    <li><input id="to-input" type=text value="1600 Amphitheatre Pkwy, Mountain View, CA"/></li>
  </ul>
  <div>
    <select onchange="Demo.getDirections();" id="travel-mode-input">
      <option value="driving" selected="selected">By car</option>
      <option value="bicycling">Bicycling</option>
      <option value="walking">Walking</option>
    </select>
    <select onchange="Demo.getDirections();" id="unit-input">
      <option value="imperial" selected="selected">Imperial</option>
      <option value="metric">Metric</option>
    </select>
    <input onclick="Demo.getDirections();" type=button value="Go!"/>
  </div>
  <div id="dir-container"></div>
</div>
<div id="map-container"></div>

<script type="text/javascript">
var Demo = {
  // HTML Nodes
  mapContainer: document.getElementById('map-container'),
  dirContainer: document.getElementById('dir-container'),
  fromInput:...