JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<script src="http://mixitup.io/js/jquery.mixitup.min.js"></script>
<div id="left">Punto Architectes
  
    <ul>
        <li class="filter" data-filter="all">show all</li>
        <li class="filter" data-filter="green">Pink</li>
        <li class="filter" data-filter="blue">Blue</li>
        <li class="filter" data-filter="yellow">Yellow</li>
    </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>

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 {
    float:left;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-top:20px solid white;
    border-bottom:20px solid white;
    border-right:10px solid white;
    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;
}
.thumbs {
    box-sizing:border-box;
    border-right:10px solid red;
    float:left;
    background:red!important;
    width:25%;
    padding-bottom:10%;
    margin-bottom:10px;
}
.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;}

/* RESPONSIVE BEHAVIOURS */

/* DESKTOP RESIZE */
 @media screen and (max-width : 1024px) {
    .thumbs {
        width:50%;
    }
}
@media screen and (max-width : 700px) {
    .thumbs {
        width:100%;
    }
}

JavaScript

$('#Grid').mixitup({    
    effects: ['fade'],

    animateGridList: false


});