JSFiddle - React, Tailwind, and code Playground

by elad2109

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<div id="container">
    <div id="header">

        <img id="headerImg" src="images/marker-icon-2x.png">
        <h1 id="headerTitle"> My Title </h1>

    </div>

    <div id="map"></div>
    <div id="lowerSection">
        <div id="radioDiv">
            <select name="dropdown" size=1>
                <option value="-1">none</option>
                <option value="0">1st alternative</option>
                <option value="1">2nd alternative</option>
                <option value="2">3rd alternative</option>
                <option value="3">4th alternative</option>
            </select>
            <br/>
            <br/>

            <input id="startRadio" type="radio" name="marker" value="0" checked="checked"> start
            <input id="marker_0" type="text">
            <br/>
            <br/>
            <input id="endRadio" type="radio" name="marker" value="1"> end
            <input id="marker_1" type="text">
            <br/>
            <br/>
            <button id="compare_btn" type="button">Beta vs. Prod</button>
        </div>

        <div id="legend">
            <h3>legend:</h3>
        </div>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="routes.js"></script>-->
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/beta_map.js"></script>

CSS

#container {
  height: 600px;
  width: 1100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#header {
  padding: 50px;
  background: #93c4d3;
  overflow: hidden;
}

#headerImg,
#headerTitle {
  float: left;
  padding-left: 60px;
}

#map {
  height: 600px;
  width: 1100px;
}

div.lowerSection {
  overflow: hidden;
}

#radioDiv,
#legend {
  float: left;
}

#radioDiv {
  padding-left: 60px;
}

#legend {
  float: right;
  width: 200px;
  height: 100px;
  border: 5px solid cyan;
}