JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/objectivehtml/FlipClock/master/css/flipclock.css">
<script src="https://rawgithub.com/objectivehtml/FlipClock/master/js/flipclock/flipclock.min.js"></script>
<script src="https://rawgithub.com/objectivehtml/FlipClock/master/js/flipclock/libs/prefixfree.min.js"></script>
<div class="wrapper" id="pre">
    <div id="countdown"></div>
</div>
<div id="map-canvas"></div>
<div class="wrapper" id="post">Bottom</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/src/infobox_packed.js"></script>

SCSS

.wrapper{
    height: 300px;
    line-height: 300px;
    
    font-size: 30px;
    text-align: center;
}

#pre{
    position: relative;
    z-index: 1;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
}

#countdown{
    float: left;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin: -60px 0 0 -230px;
    padding-top: 25px;
}

#map-canvas{
    height: 340px;
}

#infowindow{
    margin-left: 20px;
    width: 240px;
    
    background-color: #fff;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.75));
    
    .content{
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        text-align: center;
        
        img{
            margin-bottom: 10px;
            width: 100%;
        }
        
        i{
            color: #cacaca;
        }
        
        .name{
            margin-bottom: 15px;
            
            color: #4a4a4a;
            font-weight: bold;
            font-size: 14px;
        }
        
        .date{
            display: inline-block;
            margin-bottom: 25px;
        }
        
        .day{
            display: inline-block;
            padding-right: 5px;
            
            color: #959595;
            border-right: 2px solid #bebebe;
            font-size: 50px;
            line-height: 50px;
        }
        
        .right{
            float: right;
            padding-left: 10px;         
            
            color: #cacaca;
        }
        
        .month{
            font-size: 28px;
            line-height: 22px;
        }
        
        .year{
            font-size: 26px;
            line-height: 32px;
        }
    }
}

#infowindow{
	position: relative;

    &:after {
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -10px;
            
        border: solid transparent;
        border-width: 10px 15px;
        border-right-color: #fff;
        content: " ";
    }
}

JavaScript

// OPTIONS
//////////
var position = new google.maps.LatLng(37.784181, -122.401389),
    image = 'https://dl.dropboxusercontent.com/u/55365/image.jpg',
    name = 'Moscone Center West',
    date = '2013/09/09 14:00';
//////////



date = moment(date);

var clock = $('#countdown').FlipClock(date.diff(moment(), 'seconds'), {
    countdown: true
});

var img = new Image(), image_height;
img.src = image;
img.onload = function() {
    image_height = 240*(img.height/img.width);
    initialize();
}

function initialize() {
    
    var mapOptions = {
        center: new google.maps.LatLng(position.ob, position.pb+0.0025),
        zoom: 16,
        disableDefaultUI: true,
        zoomControl: true,
        scrollwheel: false
    }
    
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    var marker = new google.maps.Marker({
        map: map,
        position: position,
        icon: {
            path: "M768 896q0 106 -75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75t75 181zM1024 896q0 -109 -33 -179l-364 -774q-16 -33 -47.5 -52t-67.5 -19t-67.5 19t-46.5 52l-365 774q-33 70 -33 179q0 212 150 362t362 150t362 -150t150 -362z",
            scale: 0.02,
            strokeColor: '#547efd',
            strokeWeight: 1,
            fillColor: '#5c84fb',
            fillOpacity: 1,
            rotation: 180
        }
    });  
    
    date = moment(date);
    
    var infoboxContent = 
        '<div id="infowindow" style="margin-top:'+(-(image_height+135)/2-14)+'px;">'+
            '<div class="content">'+
                '<img src="'+image+'">'+
                '<div class="name"><i class="icon-map-marker icon-large"></i> '+name+'</div>'+
                '<div class="date">'+
                    '<div class="day">'+date.format('DD')+'</div>'+
                    '<div class="right">'+
                        '<div class="month">'+date.format('MMM').toUpperCase()+'</div>'+
                        '<div...