JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<body>
    <section id="main">
        <div id="one" class="grid transition">
            <div class="one-content grid-content transition"></div>
            <div id="one-panel" class="panel"></div>
        </div>
        <div id="two" class="grid transition">
            <div class="two-content grid-content transition"></div>
            <div id="two-panel" class="panel"></div>
        </div>
        <div id="three" class="grid transition">
            <div class="three-content grid-content transition"></div>
            <div id="three-panel" class="panel"></div>
        </div>
        <div id="four" class="grid transition">
            <div class="four-content grid-content transition"></div>
            <div id="four-panel" class="panel"></div>
        </div>
        <div id="five" class="grid transition">
            <div class="five-content grid-content transition"></div>
            <div id="five-panel" class="panel"></div>
        </div>
        <div id="six" class="grid transition">
            <div class="six-content grid-content transition"></div>
            <div id="six-panel" class="panel"></div>
        </div>
        <div id="seven" class="grid transition">
            <div class="seven-content grid-content transition"></div>
        </div>
        <div id="eight" class="grid transition">
            <div class="eight-content grid-content transition"></div>
        </div>
        <div id="nine" class="grid transition">
            <div class="nine-content grid-content transition"></div>
        </div>
        <div id="ten" class="grid transition">
            <div class="ten-content grid-content transition"></div>
        </div>
        <div id="eleven" class="grid transition">
            <div class="eleven-content grid-content transition"></div>
        </div>
        <div id="twelwe" class="grid transition">
            <div class="twelwe-content grid-content...

SCSS

html, body {
  height: 100%;
  //font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  #main {
    min-width: 1024px;
    height: 100%;
    .grid {
      width: 20%;
      min-height: 200px;
      height: 25%;
      float: left;
      background-color: blue;
      -moz-box-shadow:inset 0px 0px 3px #000000;
      -webkit-box-shadow:inset 0px 0px 3px #000000;
      .grid-content {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .panel {
        width: 100%;
        height: 100px;
        left: 0px;
        position: absolute;
        z-index: -99;
        visibility: hidden;
        opacity: 0;
      }
      &:hover {
        .grid-content {
          opacity: 0;
        }
      }
    }
    #one {
      #one-panel {
        height: 300px;
      }
      .panel {
        background-color: yellow;
      }
    }
    #two {
      #two-panel {
        height: 150px;
      }
      .panel {
        background-color: blue;
      }
    }
    #three {
      .panel {
        background-color: green;
      }
    }
    #four {
      .panel {
        background-color: pink;
      }
    }
    #five {
      .panel {
        background-color: orange;
      }
    }
    #six {
      #six-panel {
        height: 200px;
      }
    }
  }
}

/************************************************************ MEDIA QUERIES ************************************************************/
@media all and (min-width: 420px) {
  body {
    #main {
      .grid {
        //width: 50%;
      }
    }
  }
}

@media all and (min-width: 770px) {
  body {
    #main {
      .grid {
        //width: calc(100% / 3);
      }
    }
  }
}

@media all and (min-width: 1024px) {
  body {
    #main {
      .grid {
        //width: 25%;
      }
    }
  }
}

@media all and (min-width: 1280px) {
  body {
    #main {
      .grid {
        //width: 20%;
      }
    }
 ...

JavaScript

$(document).ready(function(){
    var myApp = {};
    myApp.on = false;
    myApp.boxes = [$('#one'), $('#two'), $('#three'), $('#four'), $('#five'), $('#six')];
    
    myApp.boxes_1 = $('.grid').slice(5, 10);
    myApp.boxes_2 = $('.grid').slice(10, 15);

    wys = [$('#one-panel').height(), $('#two-panel').height(), $('#six-panel').height()];

    $(myApp.boxes[0]).click(function(){
        if((myApp.boxes_1).css('margin-top') == '0px'){
            $('.grid').slice(5, 10).transition({marginTop: wys[0]}, 400);
            $('.grid').slice(10, 15).transition({marginTop: '0px'}, 400);
        }else {
            $('.grid').slice(5, 10).transition({marginTop: '0px'}, 400);
        }
    });
    $(myApp.boxes[1]).click(function(){
        if((myApp.boxes_1).css('margin-top') == '0px'){
            $('.grid').slice(5, 10).transition({marginTop: wys[1]}, 400);
            $('.grid').slice(10, 15).transition({marginTop: '0px'}, 400);
        }else {
            $('.grid').slice(5, 10).transition({marginTop: '0px'}, 400);
        }
    });
    $(myApp.boxes[5]).click(function(){
        if((myApp.boxes_2).css('margin-top') == '0px'){
            $('.grid').slice(10, 15).transition({marginTop: wys[2]}, 400);
            $('.grid').slice(5, 10).transition({marginTop: '0px'}, 400);
        }else {
            $('.grid').slice(10, 15).transition({marginTop: '0px'}, 400);
        }
    });
});