JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<script src="http://mixitup.io/js/jquery.mixitup.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="left">Punto Architectes
    <ul class="menu">
        <li class="filter" data-filter="all">Projects</li>
        <ul class="projects_submenu">
            <li class="filter" data-filter="green">Interior</li>
            <li class="filter" data-filter="yellow">Public</li>
            <li class="filter" data-filter="blue">Commercial</a>
            </li>
        </ul>
        <li><a href="#">Profile</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li id="publications"><a href="#">Publications</a>

        </li>
        <ul class="publications_submenu">
            <li><a href="#">Press</a>

            </li>
            <li><a href="#">Essays</a>

            </li>
        </ul>
    </ul>
</div>
<div id="middle">Middle Middle Middle Middle</div>
<div id="Grid">
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs long blue"></div>
    <div class="mix thumbs green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs long green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs long blue"></div>
    <div class="mix thumbs green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs long green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
</div>

CSS

body {
    padding:0;
    margin:0;
    width:100%;
    font-family:helvetica;
    color:black;
    font-size:12px;
    letter-spacing:0.2em;
}
html {
    overflow-y: scroll;
}
#left {
    position:fixed;
    top:0;
    left:0;
    width:170px;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border:20px solid white;
    background:blue;
}
#middle-wrap {
    width:50%;
    height:100%;
    box-sizing:border-box;
    border: 20px solid white;
    position:fixed;
    top:0;
    left:0;
}
#middle {
    position:fixed;
    width:50%;
    top:0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-top:20px solid red;
    border-bottom:20px solid red;
    border-right:20px solid red;
    height:100%;
    background:orange;
}
#Grid {
    float:right;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-right:20px solid white;
    border-top:20px solid white;
    border-left:10px solid white;
    background:orange;
    font-size: 0px;
}
.thumbs {
    box-sizing:border-box;
    border-right:10px solid red;
    display:inline-block;
    background:red!important;
    width:25%;
    padding-bottom:10%;
    margin-bottom:10px;
    vertical-align:top;
}
.long {
    padding-bottom:30%;
}
.green {
    background:green!important;
}
.blue {
    background:blue!important;
}
.yellow {
    background:yellow!important;
}
ul#menu {
    list-style:none;
}
#Grid .mix {
    opacity: 0;
    display: none;
}
.menu {
    position:absolute;
    bottom:0;
    width:130px;
    padding:0;
    margin:0;
    text-align:left;
    line-height:1.5em;
    list-style:none;
}
.menu li a {
    color:black;
    text-decoration:none;
}
.menu li a:hover {
    text-decoration:underline;
}
.clearfix {
    clear:both;
}
/* RESPONSIVE BEHAVIOURS */

/* DESKTOP RESIZE */

/* iPad in landscape */
 @media screen and (min-width : 768px) and (max-width : 1024px) {
    .thumbs {
      ...

JavaScript

$('#Grid').mixitup({    
    effects: ['fade'],
    animateGridList: false,
    easing: 'smooth'
});



$(document).ready(function () {
    $('.projects_submenu').hide();
    $('.publications_submenu').hide();
});

$('#middle').width(function () {
    return ($(this).parent().width() * 0.5) - 170;
});

$('ul.menu > li:first').click(function () {
    $(".projects_submenu").slideToggle();
    $('.publications_submenu').slideUp();
});

$('li#publications').click(function () {
    $(".publications_submenu").slideToggle();
    $('.projects_submenu').slideUp();

});