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;
    background: #eee;
    border: 2px solid #8E006A;
    color: #262524;
    z-index:1000;
}
.big-s.special {
	margin-top:49px;
	margin-left:-151px;
    width: 202px;
    height: 102px;
    background: #eee;
    border: 2px solid #8E006A;
    color: #262524;
    z-index:1000;
}
.big-s:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 15px;
  width: 0;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: #6e0b5f transparent;
  z-index:90;
}
.big-s.special:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 163px;
  width: 0;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: #6e0b5f transparent;
  z-index:90;
}
.big-s:after {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: 15px;
  width: 0;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: #eeeeee transparent;
  z-index:90;
}
.big-s.special:after {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: 163px;
  width: 0;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: #eeeeee transparent;
  z-index:90;
}
.big-m...

JavaScript

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

    $(".item-s").mouseover(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).toggleClass('special');
		}
	});

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

    $(".item-s").mouseout(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).removeClass('special');
		}
	});

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

    $(".item-m").mouseover(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).toggleClass('special');
		}
	});

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

    $(".item-m").mouseout(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).removeClass('special');
		}
	});

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

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

    $(".item-l").mouseover(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).toggleClass('special');
		}
	});

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

    $(".item-l").mouseout(function(e){
		var pageWidth = $('body').width();
		if ( e.pageX > pageWidth / 2 ){
			$(this).removeClass('special');
		}
	});

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

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