JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<div class='schedule-container'>
    <div class="schedule-card">
        <img alt="" class="block" height="48" id="u5538_img" src="http://kabobtrolley.com/images/sch-icon.jpg" width="80"></img>
        <p class='schedule-date'>Tuesday 28</p>
        <p class="schedule-type">Trölley Truck</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
        <p class="schedule-type">Trölley Cart</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
    </div>
</div>
<div class='schedule-container'>
    <div class="schedule-card">
        <img alt="" class="block" height="48" id="u5538_img" src="http://kabobtrolley.com/images/sch-icon.jpg" width="80"></img>
        <p class='schedule-date'>Tuesday 28</p>
        <p class="schedule-type">Trölley Truck</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
        <p class="schedule-type">Trölley Cart</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
    </div>
</div>
<div class='schedule-container'>
    <div class="schedule-card">
        <img alt="" class="block" height="48" id="u5538_img" src="http://kabobtrolley.com/images/sch-icon.jpg" width="80"></img>
        <p class='schedule-date'>Tuesday 28</p>
        <p class="schedule-type">Trölley Truck</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
        <p class="schedule-type">Trölley Cart</p>
        <p id="cart-mon-time">11:30-2:00</p>
        <p id="cart-mon-loc">11:30-2:00 901 Mint Plaza 66 Mint St., @Blue Bottle Cafe</p>
    </div>
</div>
<div class='schedule-container'>
    <div class="schedule-card">
        <img alt="" class="block"...

CSS

.row{ margin-top: 20px}

.body {
    background-color: black;
    
}


.schedule-container {
    margin-left: 10px;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    border: 1px solid #5f5f5f;
    width: 200px;
    height: 320px;
    text-align: center;
}


.schedule-date {
    margin: 15px 0 0 0;
    font-size: 22px;
    font-weight: 600;   
}

.schedule-type {
    font-weight: bold;
    margin: 15px 0 0 0;
    font-size: 16px;
}

JavaScript

(function () {

        //$response.innerHTML = 

        function setupHtml(json) {
            var obj = JSON.parse(json);
            var $response = document.getElementById("u5537-11");

            $response.innerHTML = obj.schedules.monday.cart.locations[0];
        }



        var xhr = new XMLHttpRequest();
        xhr.timeout = 2000;
        xhr.onreadystatechange = function (e) {
            console.log(this);
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    // debugger;
                    // console.log(xhr.response);
                    //xhr.response;
                    setupHtml(xhr.response);
                } else {
                    console.error("XHR didn't work: ", xhr.status);
                }
            }
        }
        xhr.ontimeout = function () {
            console.error("request timedout: ", xhr);
        }
        xhr.open("get", "https://script.google.com/macros/s/AKfycbwRBO_9Cu095LUGiXUnY3JNCpbSTBsRnYrl33arS3hCK9IziFk/exec", /*async*/ true);
        // xhr.responseType = "text";
        xhr.send();

    })();