JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.js"></script>
<body>

<div style="width:320px; margin:0 auto" >

<div id="container">  
    
    <div class="element-item item-s">
        <div class="content_small">
        	<img src="http://www.ilabdesign.net/test/assets/images/pL8r42eD.jpg" width="100%" height="100%" >
        </div>
        <div class="content_big">
        	<div class="pop-up-title">
        		EXPANDED STATE
          	</div>
		</div>
    </div>
    
    <div class="element-item item-s">
        <div class="content_small">
        	<img src="http://www.ilabdesign.net/test/assets/images/pL8r42eD.jpg" width="100%" height="100%" >
        </div>
        <div class="content_big">
        	<div class="pop-up-title">
        		EXPANDED STATE
          	</div>
		</div>
    </div>
    
    <div class="element-item item-m">
        <div class="content_small">
        	<img src="http://www.ilabdesign.net/test/assets/images/pL8r42eD.jpg" width="100%" height="100%" >
        </div>
        <div class="content_big">
        	<div class="pop-up-title">
        		EXPANDED STATE
          	</div>
		</div>
    </div>    
    <div class="element-item item-s">
        <div class="content_small">
        	<img src="http://www.ilabdesign.net/test/assets/images/pL8r42eD.jpg" width="100%" height="100%" >
        </div>
        <div class="content_big">
        	<div class="pop-up-title">
        		EXPANDED STATE
          	</div>
		</div>
    </div>
    
    <div class="element-item item-s">
        <div class="content_small">
        	<img src="http://www.ilabdesign.net/test/assets/images/pL8r42eD.jpg" width="100%" height="100%" >
        </div>
        <div class="content_big">
        	<div class="pop-up-title">
        		EXPANDED STATE
         ...

CSS

/* body classes */

body {
  color: #EEE;
  background: #262524;
  margin: 0;
  padding: 0;
}

html {
  font-family: Texta, sans-serif;
  font-size: 17px;
  line-height: 1.5;

}

/* ---- item ---- */

.item-s {
  width: 50px;
  height: 50px;
  float: left;
  background: #C09;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}
.item-m {
  width: 100px;
  height: 100px;
  float: left;
  background: #C09;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}
.item-l {
  width: 150px;
  height: 150px;
  float: left;
  background: #C09;
  border: 1px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}
.item:hover {
  border-color: #eee;
  cursor: pointer;
}

/* ---- expanded state ---- */

.big-s {
	margin-top:49px;
	margin-left:-1px;
    width: 202px;
    height: 102px;
    right:0px;
    background: #eee;
    border: 2px solid #8E006A;
    color: #262524;
    z-index:1000;
}
.big-m {
	margin-top:99px;
	margin-left:-1px;
    width: 202px;
    height: 152px;
    background: #eee;
    border: 2px solid #8E006A;
    color: #262524;
    z-index:1000
}
.big-l {
	margin-top:149px;
	margin-left:-1px;
    width: 202px;
    height: 202px;
    background: #eee;
    border: 2px solid #8E006A;
    color: #262524;
    z-index:1000
}

.content_small {
	cursor:pointer;
}

.big-s .content_small {
 	margin-top:-51px;
 	margin-left:-1px;
    width: 50px;
    height: 50px;
    border: 1px solid #8E006A;
}
.big-m .content_small {
 	margin-top:-101px;
 	margin-left:-1px;
    width: 100px;
    height: 100px;
    border: 1px solid #8E006A;
}
.big-l .content_small {
 	margin-top:-151px;
 	margin-left:-1px;
    width: 150px;
    height: 150px;
    border: 1px solid #8E006A;
}

.content_big {
    display: none;
}

.big-s .content_big {
    display: block;
    font-size:12px;
    padding:10px 14px;
}
.big-m .content_big {
    display: block;
    font-size:12px;
    padding:10px 14px;
}
.big-l .content_big {
    display: block;
    font-size:12px;
    padding:10px...

JavaScript

$(document).ready(function(){
    $("#container").isotope({
        itemSelector : ".item-s, .item-m, .item-l"
    });
    
    $(".item-s").mouseover(function(){
        $(this).toggleClass("big-s");
    });

    $(".item-s").mouseout(function(){
        $(this).removeClass("big-s");
    });

    $(".item-s").click(function(){
        $(this).removeClass("big-s");
    });

    $(".item-m").mouseover(function(){
        $(this).toggleClass("big-m");
    });

    $(".item-m").mouseout(function(){
        $(this).removeClass("big-m");
    });

    $(".item-m").click(function(){
        $(this).removeClass("big-m");
    });

    $(".item-l").mouseover(function(){
        $(this).toggleClass("big-l");
    });

    $(".item-l").mouseout(function(){
        $(this).removeClass("big-l");
    });

    $(".item-l").click(function(){
        $(this).removeClass("big-l");
    });
    
});