JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div id="sidebar" class="fixed height100 bg-black top-left-zero ease2 zindex2">Nav</div>

<div id="main" class="relative ml260 ease2">
    
    <div id="navigation">
    <div class="wrapper">
        <div class="logo"></div>
        <div class="icon-reorder pointer fixed ease2"></div>
    </div>
    </div>
    
    
    <div id="header" class="pt80">
        <div class="width12 mc">Header
        </div>
    </div>
    <!-- end header -->
    <div id="content" class="mt80">
        Content
    </div>
    <!-- end content -->
    <div id="footer" class=""></div>
    <!-- end footer -->
</div>
<!-- end main-->

CSS

/*
Theme Name: Foodlink
Theme URI: http://blacksheepdesign.co.nz
Author: Blacksheepdesign 
Author URI: http://www.blacksheepdesign.co.nz/
Author Design: Clemens Bergmann [email protected]
Author Front-end: David Bastian - [email protected]
Author Wordpress Integration: Miguel Garrido - [email protected]
Description: The Foodlink wordpress theme developed by Blacksheepdesign. This theme works with magic fields 2 and supports custom Post type, BOOM!.
Version: 1.1
*/

#navigation {
    height:160px;
    background-color: #ed2f35;
    width: 100%;
  
    position: fixed;
}
#wrapper {
    clear:both;
    margin: 0px auto;
    max-width: 1144px;
    border:1px solid black;
}
.logo {
    background: url("http://littlerocket.co.nz/wp-content/themes/twentyeleven/images/logo.png");
    background-repeat: no-repeat;
    z-index:999999;
    margin-top: 25px;
    margin-left: 20px;
    display:block;
    float:right;
    height:106px;
    width: 136px;
    transition: background 0.5s linear 0s;
}

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:300, 400, 700|Vollkorn:400italic);

/*reset*/
 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color:rgb(64, 64, 64);
    font-family:'Open Sans', sans-serif;
}
article,...

JavaScript

function loadContent(post_url, state) {


    var $thisData = $('#content-wrap');

    // If state is click, add loading class on #second
    if (state == 'click') {
        $('#content-inner').addClass('loading');
    }

    $.ajaxSetup({
        cache: false
    });

    $.ajax({
        type: 'POST',
        cache: false,
        url: post_url,

        success: function (data, status, xhr) {

            // Loading data and placing on #content
            $thisData.html($(data).find('#content-wrap'));

            // after load data we remove class loading on #second
            $('#content-inner').removeClass('loading');

            /*
            if( state == 'home' ){ 
                $('body').removeClass('loading');  // Remove class loading, on home page this enable the overflow
                $('#home nav').removeClass('off'); // Remove class off, this shows the element
                $('.footer').removeClass('none'); // Show footer after loading
                $('.mobile-wrapper').removeClass('off');
            }
            */

        }
    });

    return;

    /*
    $('#second').load(post_url+' #content', function(data, status, xhr){

        console.log(data);

        post_content = data;
        $('#second').removeClass('loading');
        
        if( state == 'home' ){ 
            $('body').removeClass('loading');  // Remove class loading, on home page this enable the overflow
            $('#home nav').removeClass('off'); // Remove class off, this shows the element
        }

    });*/

}

/*
$(document).ajaxComplete(function( event, xhr, settings ) {

    $.ajax({
      url: site_url+'/wp-content/themes/wp-foodlink/js/scripts.js',
      dataType: "script",
    });


});
*/

$(document).ready(function () {

    // Ajax search
    $('#search').submit(function (e) {

        e.preventDefault();

        var query = $('#search input[type="text"]').val();
        query = query.replace(' ', '+');
        post_url = (query ?...