JSFiddle - React, Tailwind, and code Playground

by Joe Pea

HTML

<script src="http://x.iaesr.com/js/lib/jquery.masonry.js"></script>
<script src="http://x.iaesr.com/js/lib/jquery.address-1.4.min.js"></script>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Rajorah</title>

        <link rel="stylesheet" href="css/style.css" />

    </head>



    <body>

        <div id="wrapper">

            <div id="header">

                <h1>RASARJO</h1>

                <menu>

                    <li>

                        <a class="menu_link" href="#" ></a>

                    </li>

                    <li>

                        <a class="menu_link" href="#" >Wired</a>

                    </li>

                    <li>

                        <a class="menu_link" href="#" >Link</a>

                    </li>

                    <li>

                        <a class="menu_link" href="#" >Projects</a>

                    </li>

                    <li>

                        <a class="menu_link" href="#" >About</a>

                    </li>

                    <li>

                        <a class="menu_link" href="#" >Hire</a>

                    </li>

                </menu>

            </div>

            <div id="body">

            

                <div id="content">

                </div>

            

                <div id="grid">

                    

                </div><!-- #grid -->

            

            </div><!-- #content -->

            <div id="footer"></div>

        </div><!-- #wrapper -->

        

        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

        <script src="js/lib/jquery.masonry.js"></script>

        <script src="js/lib/jquery.address-1.4.min.js"></script>

        <script src="js/x.js"></script>

        

    </body>



</html>

CSS

/* BROWSER RESET - http://meyerweb.com/eric/tools/css/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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* END BROWSER RESET */

#header {
    color: #fff;
    border-bottom: 3px solid #000;
    border-left: 3px solid #000;
    background: #000;
    left: 4px;
    position: fixed;
    z-index: 2;
    top: 4px;
}
    #header h1 {
        color: white;
        font-family: arial black;
        font-size: 12px;
        display: inline;
        letter-spacing: .2em;
    }
    #header menu {
        display: inline;
    }
        #header menu li {
            display: inline;
            margin: 0 0 0 5px;
        }
            .menu_link {
                color: white;
                text-decoration: none;
                font-family: arial;
                font-size: 12px;
                letter-spacing: .2em;
            }
            .menu_link:hover {
                color: black;
                background: yellow;
                
            }
#body {
    z-index: 1;
    padding: 23px...

JavaScript

/*Settings*/
var base_url        = 'http://x.iaesr.com',
    wp_path            = '/wp';

/*Only change if you know what you're doing.*/    
var $clicked_item = null;

function reorganize() {
    $('#grid').masonry({
        columnWidth: /*132*/204,
        itemSelector: '.box'
    });
}

function set_position($target_item, top_offset, right_offset) {
    $target_item.css({ 'position':'absolute', 'top':top_offset+'px', 'right':right_offset+'px' });
}

$(document).ready(function() {

    /*Set up initial document*/
    $('<div id="temp"></div>').load(base_url+wp_path+' #wp_content', function(){
        //nothing yet
    });
    
    $('#temp #wp_content .post').each(function() {
        var $url        = $('.entry-title a').attr('href'),
            $title        = $('.entry-title a').text(),
            $img_url    = $('.wp-post-image').attr('src'),
            $img_desc    = $('.wp-post-image').attr('alt'),
            
            $box        = $('<div class="box"></div>'),
            $link        = $('<a class="box_link" href="XXX URL XXX"></a>'),
            $desc        = $('<div class="box_desc"></div>'),
            $desc_title    = $('<span class="box_desc_title">XXX TITLE XXX</span>'),
            $thumb        = $('<div class="box_thumb">'),
            $thumb_img    = $('<img class="box_thumb_img" src="XXX IMG URL XXX" alt="XXX IMG DESCRIPTION XXX" title="XXX IMG DESCRIPTION XXX" />');
        
        $('#grid').append($box);
        $box.append($link);
        $link.attr('href', $url);
        $link.append($desc);
        $desc.append($desc_title);
        $desc_title.text($title);
        $link.append($thumb);
        $thumb.append($thumb_img);
        $thumb_img.attr('src', $img_url).attr('alt', $img_desc).attr('title', $img_desc);
        
        
        
        // <div class="box">
            // <a class="box_link" href="XXX URL XXX">
                // <div class="box_desc">
                    // <span class="box_desc_title">XXX TITLE...