JSFiddle - React, Tailwind, and code Playground

by rushtonmd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
Awesome Shit
<div id="carcontainer">
</div>

CSS

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}
.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 1.5em;
    width: 300px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
    font-size: 1.5rem;
}

.item img {
    width: 100%;
    height: 200px;
}
}

JavaScript

var $container = $('#carcontainer');
// initialize
$container.masonry({
    columnWidth: 300,
  itemSelector: '.item'
});

$.ajax({
    url: "http://search.3taps.com",
    dataType: "json",
    data: { 
        "auth_token": "468f64bb897eeec9d62eefacab12738d",
        "retvals": "heading,images,location,external_url",
        "rpp": "100",
        "lat": "37.7833",
        "long":"122.4167",
        //"radius":"10000mi",
        "sort":"distance",
        //"location.region": "USA-SFO-NOR",
        "category": 'VAUT',
        "heading":'audi a3 quattro',
        "tier": "1"
    },
    cache: false,
    type: "GET",
    success: function(response) {
        var postings = response.postings;
        //alert(response);
        $.each(postings, function(index){
            var heading = postings[index].heading;
            var url = postings[index].external_url;
            var location = postings[index].location.state;
            var imgUrl = postings[index].images[0] && postings[index].images[0].full || "null";
            console.log(imgUrl);
            //var imgUrl = "TEST"; //postings[index].images[0];
            
            $('#cars').append('<li><a href="' + postings[index].external_url + '" target="_blank">' + postings[index].heading + ' : ' + postings[index].location.state +'</a></li>');
            
            $('#carcontainer').append('<div class="item"><a href="' + url + '" target="_blank"><div>' + heading + ' in ' + location + '</div><div><img src="' + imgUrl + '"></img></div></a></div>');
            
            $.ajax({
                url: "http://www.google.com",
                success: function(response){
                    console.log("YAY!");
                }
            });
        });

        
    },
    error: function(xhr) {
        alert("OUCH!");
    }
});