JSFiddle - React, Tailwind, and code Playground

by Shidhin C R

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <div id="mapView"></div>
        <script id="dealerMapDetailsTmpl" type="text/x-jquery-tmpl">
        <div class="results-list list-content-background">
                <div class="dealer-content">
                    <div class="dealer-address-wrapper">
                        <div class="dealer-heading-wrapper">
                            <span class="dealer-heading">${dealerName}</span>
                        </div>
                        
                        <div class="dealer-address">
                                <div class="dealer-address-header">${address.street1}</div>
                                <div class="dealer-nav" >
                                    <span class="sprite icon-link-indicator"></span>
                                </div>                                
                                <div>
                                    <span>${address.city}</span>, <span>${address.state}</span>
                                    <span class="dealer-zip-text">${address.zip}</span>
                                </div>
                        </div>
                    </div>
                    <div class="btn-get-directions">
                        <a href="${links.hours_and_directions.url}"><span class="glossy-btn lite">Get Directions</span></a>
                    </div>                    
                </div>
            </div>
        </script>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button {
    border: medium none;
    padding: 0;
}
.cta-buttons-block {
    font-size: 16px;
    margin: 10px 5px;
    overflow: hidden;
}
.cta-buttons-block > * {
    float: left;
    min-height: 1px;
    width: 33.333%;
}
.cta-buttons-block:first-child {
    clear: left;
}
.cblt-button {
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    display: block;
    font-family: Lucida Grande;
    font-size: 0.72em;
    height: 6em;
    line-height: 1.4;
    margin: 0.7em 3px;
    padding-top: 0.7em;
    position: relative;
    text-align: center;
}
.header-wrapper {
    height: 30px;
    padding: 13px 0 0;
}
.header-wrapper .dealer-name {
    font-size: 1.1em;
    font-weight: normal;
    position: relative;
    text-align: center;
}
.home-dealer-ad {
    line-height: 0;
    min-height: 80px;
}
.home-dealer-ad .welcome {
    font-size: 18px;
    line-height: 1;
    margin: 25px 0 0 15px;
}
.home-dealer-ad .dealer-name {
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    margin: 10px 0 0 15px;
    padding-bottom: 15px;
}
ul.main-navigation {
    clear: both;
    list-style: none...

JavaScript

var data = {
    "dealers": [{
        "siteSubType": "WEB",
        "preferredForSearchZip": false,
        "image": {
            "url": "http://assets.cobaltnitra.com/websites/031110-c069/websitesEar/websitesWebApp/programs/Hyundai_LSLP/en_US/images/hyundai.gif"
        },
        "webId": "hyun-car-pros",
        "dealerName": "Hyundai of Seattle",
        "links": {
            "home": {
                "label": "Home",
                "url": "http://www.seattlesbesthyundai.com/?referrer=www.hyunlslpdealer.com&cs:pro=ht2&cs:rv=1l9PTypJTFg9JtQtDQZmKtb353pbnkzFkQc18yQx2fvQmL1BZF2n"
            },
            "quick_quote": {
                "label": "Quick_quote",
                "url": "http://www.seattlesbesthyundai.com/QuickQuoteForm?referrer=www.hyunlslpdealer.com&cs:pro=ht2&cs:rv=1l9PTypJTFg9JtQtDQZmKtb353pbnkzFkQc18yQx2fvQmL1BZF2n"
            },
            "inventory": {
                "label": "Inventory",
                "url": "http://www.seattlesbesthyundai.com/NewVehicleSearch?referrer=www.hyunlslpdealer.com&cs:pro=ht2&cs:rv=1l9PTypJTFg9JtQtDQZmKtb353pbnkzFkQc18yQx2fvQmL1BZF2n"
            },
            "hours_and_directions": {
                "label": "Hours_and_directions",
                "url": "http://www.seattlesbesthyundai.com/HoursAndDirections?referrer=www.hyunlslpdealer.com&cs:pro=ht2&cs:rv=1l9PTypJTFg9JtQtDQZmKtb353pbnkzFkQc18yQx2fvQmL1BZF2n"
            },
            "service": {
                "label": "Service",
                "url": "http://www.seattlesbesthyundai.com/ServiceApptForm?referrer=www.hyunlslpdealer.com&cs:pro=ht2&cs:rv=1l9PTypJTFg9JtQtDQZmKtb353pbnkzFkQc18yQx2fvQmL1BZF2n"
            }
        },
        "url": "http://www.seattlesbesthyundai.com",
        "phones": {
            "sales": {
                "phone": "(877) 412-8247",
                "label": "Sales"
            },
            "service": {
                "phone": "(877) 779-0115",
                "label": "Service"
            }
        },
       ...