JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div class="schema">
        <h1>Schema</h1>
    </div>
    <div class="back"><a id="back" href="index.html"></a>
    </div>
</div>
<div id="content">
    <div class="content" style="margin-top:0px;">
        <div class="article" style="text-align:center;">
            <!-- Här skrivs det ut en massa saker -->
        </div>
    </div>
</div>

CSS

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
body {
    margin:0;
    padding:0;
    background:#ebebeb;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    max-width:100%;
}
#header {
    position:fixed;
    background: rgb(223, 71, 0);
    height:50px;
    width:100%;
    padding:0;
    text-align:center;
    z-index:999;
}
.box > a {
    text-decoration:none;
}
#clear {
    padding-top:30px;
}
.content img {
    margin-top: 64px;
}
#authForm {
    text-align:center;
}
.selectGym {
    margin-bottom:10px;
}
.authFormInput {
    height:30px;
    width:60%;
    margin-bottom:10px;
    border-radius:5px;
    border:none;
    padding-left:5px;
    -webkit-user-select: auto;
}
.authFormSubmit {
    width:60%;
    height:30px;
    background-image:url('../img/menu.gif');
    border:none;
    border-left:solid 1px #913b18;
    border-right:solid 1px #913b18;
    border-bottom:solid 1px #913b18;
    color:white;
    margin-bottom:30px;
    cursor:pointer;
}
.authFormSubmit:active {
    background-image:url('../img/menu.jpg');
}
.forgot a {
    text-align:center;
    padding:5px;
    background-color:#e0460a;
    border:solid 1px #913b18;
    border-bottom:solid 3px #913b18;
    width:125px;
    color:white;
    border-radius:2px;
    text-decoration:none;
    font-family:sans-serif;
    font-size:9pt;
}
#footer {
    position:fixed;
    background-image:url('../img/menu.gif');
    height:39px;
    width:100%;
    padding:0;
    bottom:0;
    text-align:center;
}
#content {
    position:absolute;
    padding-top: 51px;
    z-index:-1;
    width:100%;
    text-align:center;
}
.box {
    border-radius:3px;
    background:rgb(44, 42, 43);
    height:33%;
    width:45%;
    margin-bottom:5px;
    float:left;
    margin:1%;
    max-height:33;
    max-width:45%;
    min-height:33;
    min-width:48%;
}
.box:active {
    background:#e0460a;
}
.inner > img {
    width:50px;
    ;
    height: auto;
    max-width: 100%!important;
    vertical-align:...

JavaScript

$(window).load(function () { //Funktion så att allt tonas ut
    $("#status").fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
})
grabShedule();

function grabShedule() {
    var url = "http://1life.se/scraper/Schedule.php"; //URL att hämta ifrån
    $.getJSON(url, function (response) {
        var html = response.scraped[0].html; //Svaret
        $('.article').append(html); //Svaret skrivs ut i .article
    });
}