JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<div id="container">
    <div id="left">Punto Architectes
        <ul class="menu">
            <li class="filter" id="projects" data-filter="all">Projects</li>
            <ul class="projects_submenu">
                <li class="filter" id="int" data-filter="grey">Interior</li>
                <li class="filter" id="pub" data-filter="yellow">Public</li>
                <li class="filter" id="com" data-filter="black">Commercial</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 id="lang">
                <li><a href="#">FR</a>

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

                </li>
            </ul>
        </ul>
    </div>
    <div id="middle">
        <div class="info">
            <p></p>
        </div>
    </div>
    <div id="Grid">
        <div class="info hidden">
            <p>right</p>
        </div>
        <div class="thumb" id="one">aa</div>
        <div class="thumb">aa</div>
        <div class="thumb">aa</div>
        <div class="thumb">aa</div>
    </div>
</div>

CSS

body {
        padding:0;
        margin:0;
        font-family:helvetica;
        color:black;
        font-size:12px;
        letter-spacing:0.2em;
    }
    html {
        overflow-y:scroll;
        width:100%;
    }
    #left {
        position:fixed;
        width:170px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border:20px solid white;
        background:blue;
        height:100%;
        z-index:1;
    }
    p {
        margin:0;
        padding:0;
    }
    #middle {
        position:fixed;
        width:50%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border-top:20px solid white;
        border-bottom:20px solid white;
        border-left:170px solid white;
        background:blue;
        height:100%;
    }
    .hidden {
        display:none;
    }
    #Grid {
        float:right;
        width:50%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border:20px solid white;
        background:red;
        height:1400px;
    }
    .thumb {
        width:25%;
        background:green;
        display:inline-block;
        height:100px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border-right:10px solid white;
        border-bottom: 10px solid white;
        margin:0 -5px 0 0;
    }
    .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;
    }
    ul#lang {
        list-style:none;
        padding:0;
        margin-top:1em;
    }
    ul#lang > li {
        display:inline;
    }
    ul#lang > li > a {
        color:black;
        text-decoration:none;
    }
    ul#lang > li > a:hover...

JavaScript

$('.projects_submenu').hide();
    $('.publications_submenu').hide();

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

    $('li#publications').click(function () {

        $(".publications_submenu").slideToggle();
        $('.projects_submenu').slideUp();

    });

    $(window).load(function () {
        $("#container").delay(1000).animate({
            opacity: 1
        }, 700);
    });





    window.onresize = function () {
        console.log($(".thumb").css("margin-bottom"));
        if ($(".thumb").css("margin-bottom") === "1px") {
            $('#Grid > .info').removeClass('hidden');
            $('#middle').hide();
        } else {
            $('#middle').show();
            $('#Grid > .info').addClass('hidden');
        }
    };


$('#one').hover(function() {
    $('#middle >.info p').text('Apartment renovation, Paris 12e');
},
    function() {
     $('#middle >.info p').empty();
  

});