JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<script src="http://maps.google.com/maps/api/js?libraries=places&amp;language=en&amp;sensor=false"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Start venue-form -->
<form class="venue_box">
    <i class="fa fa-times-circle-o close_btn"></i>
    <div class="venue_box_title">
        [Share Venue Details]
        <span>
            Lorem ipsum copy letting DSMs know that we will
            need to know the venue details or if the DSM will
            need help securing a venue.
        </span>
    </div>
    <p>
        <label for="venue_loc_name">Location Name</label>
        <input id="venue_loc_name" class="default_input" placeholder="Enter name" />
    </p>
    <p>
        <label for="venue_loc_place">Location</label>
        <input id="autocomplete" class="default_input" placeholder="Enter address" />
        <div id="map_canvas" class="venue_map_place"></div>
    </p>
    <p>
        <label for="date_mm">Date</label>
        <input id="date_mm" class="small_inp" placeholder="MM" min="1" max="12" type="number" required /> / <input id="date_dd" class="small_inp" placeholder="DD"  min="1" type="number" required /> / <span class="date_year">2014</span>
    </p>
    <p>
        <div>
            <label for="time_hh">Start Time</label>
            <input id="start_time_hh" class="small_inp" placeholder="HH" max="12" min="1" type="number" required /> : <input id="start_time_mm" class="small_inp" placeholder="MM" max="59" min="0" type="number" required /> 
            <div class="am_pm">
                <div class="btn-group">
                    <div type="button" class="btn btn-default"> 
                        <span class="start_meridian time_am_pm">AM</span>
                    </div>
            ...

SCSS

.btn_default {
	width: auto;
	font-size: 16px;
	border-radius: 5px;
	padding: 5px 10px;
}

.venue_box {
	display: block;
	position: relative;
	max-width: 60%;
	min-width: 430px;
	height: auto;
	margin: 0 auto;
	background-color: rgba(255,255,255,1);
	padding: 50px 30px;
	border-radius: 5px;
}
.close_btn {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 30px;
	cursor: pointer;
}
.venue_box_title {
	display: block;
	width: 100%;
	height: auto;
	font-size: 34px;
	font-weight: bolder;
	text-align: center;
	span{
		font-size: 12px;
		font-weight: normal;
		display:block;
	}
}
.venue_box p {
	width: 100%;
	height: auto;
}
.venue_box p label {
	width: 100%;
	height: auto;
}
.default_input {
	width: 100%;
	height: 40px;
	border-radius: 5px;
	text-indent: 10px;
	outline: none;
}
.pac-container {
	border:1px solid #000;
}
.pac-container:after{
	content:none !important;
}
.pac-item {
	border-bottom: 1px solid #000;
	padding: 10px 10px;
	&:nth-child(n+4) {
		display: none;
	}
	&:nth-child(3) {
		border-bottom: none;
	}
	&:hover {
		background-color: rgba(0,0,0,0.2);
		cursor: pointer;
	}
}
.pac-icon {
	display: none;
}
#map_canvas {
	display: block;
	position: absolute;
	margin: 0 auto;
	width : 80%; 	/* map width */
	height: 180px;	/* map height */
	border: 1px solid #000;
	opacity: 0;
	pointer-events: none;
	transition: all .2s ease-in;
}
.gmnoprint a, .gmnoprint span {
	display: none;
}
.gmnoprint div {
	background: none !important;
}
#GMapsID div div a div img{
	display: none;
}
.gm-style div:nth-child(2) {
	display: none;
}

.small_inp {
	display: inline-block;
	max-width: 50px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: rgba(0,0,0, 0.1);
	outline: none;
	text-align: center;
	margin:0 5px;
	&:first-of-type {
		margin-left: 0;
	}
}
.am_pm {
	display: inline-block;
}
label{
	display: block;
}
.dropdown-menu {
	min-width: inherit;
	padding: 5px 5px;
	left: 8px;
	div {
		margin: 2px 0px;
		cursor: pointer;
		padding: 0px...

JavaScript

'use strict';
function checkDate(){
	var venue_month = $('#date_mm').val(),
		venue_day = $('#date_dd').val(),
		venue_year = 2014,

		venue_start_h = $('#start_time_hh').val(),
		venue_start_m = $('#start_time_mm').val(),
		start_merid = $('.start_meridian').text(),

		venue_end_h = $('#end_time_hh').val(),
		venue_end_m = $('#end_time_mm').val(),
		end_merid = $('.end_meridian').text();


	var venue_start = { 'month': venue_month, 'day': venue_day, 'start-hour': venue_start_h, 'start-min': venue_start_m, 'meridian': start_merid };

	var venue_end = { 'month': venue_month, 'day': venue_day, 'end-hour': venue_end_h, 'end-min': venue_end_m, 'meridian': end_merid };

	console.log(venue_start);
	console.log(venue_end);

	var maxDays = new Date(venue_year, venue_month, 1, -1).getDate();

	$('#date_dd').attr('max', maxDays);
}
$(document).ready(function(){

	$(function(){
		var lat = -33.8688,
			lng = 151.2195,
			latlng = new google.maps.LatLng(lat, lng);
			 
		var mapOptions = {
				center: new google.maps.LatLng(lat, lng),
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true
			},
			map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
			marker = new google.maps.Marker({
				position: latlng,
				map: map,
				title: 'Hello World!'
			});

		google.maps.event.addDomListener(window, "resize", function() {
			var center = map.getCenter();
			google.maps.event.trigger(map, "resize");
			map.setCenter(center); 
		});

		var input = document.getElementById('autocomplete');
		var autocomplete = new google.maps.places.Autocomplete(input, {
			types: ['geocode']
		});
		
		autocomplete.bindTo('bounds', map);
		var service = new google.maps.places.PlacesService(map)

		google.maps.event.addListener(autocomplete, 'place_changed', function() {
			var place = autocomplete.getPlace();
			if (place.geometry.viewport) {
				map.fitBounds(place.geometry.viewport);
			} else...