JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
<div id='travel-input-container'>
    <p class='title'>Lavancier<span style='font-family: Roboto; font-weight: 200; color: White'>Travel</span>

    </p>
    <br />
    <form action="demo_form.asp">
        <input class='origin' type="text" name="origin" placeholder="PHX" />
        <input class='destination' type="text" name="destination" placeholder="FRA" />
        <br />
        <input class='departdate' type="date" name="bday" />
        <!--change to proper-->
        <input class='returndate' type="date" name="bday" />
        <br />
        <input class='submit' type="submit" value="Submit" />
    </form>
</div>
<p class='origin-text text'>Origin:</p>
<p class='destination-text text'>Destination:</p>
<p class='depart-text text'>Departure Date:</p>
<p class='return-text text'>Return Date:</p>
<!--
<textarea  name="notes" value="notes" id="comments-box">
<?php 
echo "Welcome, " . $username_visible[0] . "\n\n\t";
echo "Type your notes here. If you want to include formatting for when you \n\t save the notes, just add standard html formatting like: \n\t\t\t<b>bolding</b>\n\t\t\t<i>italicizing</i>\n\t\t\tsuperscripting<sup>3</sup>\n\t\t\t<span style=\"font-family: 'Dancing Script', cursive; font-size: 12pt\">Even in cursive!</span>\n\tClick Submit to see the formatting below.\n\n\tOh, and Right-Click to get the Latitude and Longitude.\n\nEnjoy!";
?>
</textarea>-->
<div id="map-canvas"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dancing+Script|Roboto:400,100,300,500);

#travel-input-container {
    margin-top: 80px;
    margin-left: -10px;
    width: 100vw;
    height: 100vh;
    text-align: center;
    min-width: 1000px;
}
input {
    margin-top: 16px;
    width: 300px;
    height: 40px;
    font-family:'Roboto', Helvetica, Arial, sans-serif;
    font-size: 16pt;
    font-weight: 300;
    text-align: center;
    outline: none;
    border: none;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 15px;
    transition: all 0.5s ease;
    border-radius: 10px;
    color: rgba(20, 20, 20, 0.5);
}
input:hover {
    background-color: #91B5C9;
    color: White;
}
.text {
    position: absolute;
    color: #91B5C9;
}
p {
    font-family:'Roboto', Helvetica, Arial, Sans-Serif;
    font-size: 14pt;
    line-height: 0px;
    color: Orange;
    white-space: nowrap;
}
body {
    min-width: 1000px;
    background-color: #4B423E;
    -webkit-font-smoothing: antialiased;
}
.title {
    color: Orange;
    font-family:'Dancing Script';
    font-size: 50pt;
}
.submit {
    margin-top: 50px;
    background-color: rgba(145, 181, 201, 0);
    font-weight: 300;
    color: Black;
    border: 3px solid rgba(145, 181, 201, 0.4);
    border-radius: 10px;
    width: 150px;
}
.submit:hover {
    color: White;
}
form {
    background-color: rgba(240, 240, 240, 0.9);
    padding-top: 32px;
    padding-bottom: 20px;
    width: 800px;
    margin: 0 auto;
    border-radius: 25px;
}
#comments-box {
  font-family: 'Roboto', 'Helvetica', Arial;
  font-size: 10pt;
  font-weight: 300;
  width: 102%;
    min-width: 1000px;
  height: 700px;
    margin-left: -10px;
  border: none;
  background-image: url('http://www.lavancier.com/paperbackground.png');
  outline: none;
  box-sizing: border-box;
  padding: 10px;
}
#map-canvas {
    height: 100vh;
    width: 100vw;
    left: -10px;
    top: -10px;
}

JavaScript

var map;
var center = new google.maps.LatLng(45, 0);

function initialize() {

    // Set up the map
    var mapOptions = {
        center: center,
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function () {
    inputWidth = $("input").width();
    var originOffset = $(".origin").offset();
    $('.origin-text').css("top", (originOffset.top) - 30 + "px");
    $('.origin-text').css("left", (originOffset.left) + "px");
    var destinationOffset = $(".destination").offset();
    $('.destination-text').css("top", (destinationOffset.top) - 30 + "px");
    $('.destination-text').css("left", (destinationOffset.left) + "px");
    var departdateOffset = $(".departdate").offset();
    $('.depart-text').css("top", (departdateOffset.top) - 30 + "px");
    $('.depart-text').css("left", (departdateOffset.left) + "px");
    var returndateOffset = $(".returndate").offset();
    $('.return-text').css("top", (returndateOffset.top) - 30 + "px");
    $('.return-text').css("left", (returndateOffset.left) + "px");

    $('.interchangeable-div').css("margin-left", (originOffset.left) + "px");
});