JSFiddle - React, Tailwind, and code Playground

by Chris_Happy

HTML

<div class="container">
  <div class="block-width gallery-grid-st animation-section">
  
  
  <div class="col-sm-3-add in-view">
   <a data-toggle="modal" data-target=".student-gallery-popup2">
  <div class="student-gall-list border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"> <div class="gallery-more-no"> <h3> +2 </h3></div></li>
  </ul>
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </a>
  </div>
  
  
  <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  </ul>
  
  <div class="stu-list-tags">
  <h4 class="stu-li-heading">ONGC Batch 2017</h4>
  <p> #mercurydiaries &nbsp;   #corporatebatch  &nbsp; #learnalot &nbsp;#ongcfebbatch2017 </p>
  </div>
  </div>
  </div>
  
   <div class="col-sm-3-add in-view">
  <div class="student-gall-sec-img-st padding-add-0 border-effect">
  <ul>
  <li> <img src="http://www.mercurysolutions.co/app/webroot/img/img-gallery17.jpg" alt="banner-img"></li> 
  <li> <img...

CSS

.stu-li-heading {
	color: #c89647;
	font-size: 20px;
	font-weight: 300;
	margin: 0;
	padding: 14px 0 12px;
}
.student-gall-list.border-effect li:nth-child(1) {
	float: left;
	width: 66.6%;
	height: 140px;
	overflow: hidden;
}
.student-gall-list.border-effect li:nth-child(1) img {
	min-height: 140px;
}
.student-gall-list.border-effect li {
	background: #222222 none repeat scroll 0 0;
	float: left;
	height: 70px;
	width: 33.2%;
	overflow: hidden;
}
.student-gall-list.border-effect li img {
	min-height: 70px;
}
.student-gall-list.border-effect li:nth-child(4), .student-gall-list.border-effect li:nth-child(5), .student-gall-list.border-effect li:nth-child(6) {
	width: 33.333%;
	position: relative;
}
.gallery-more-no h3 {
	font-weight: 300;
	margin: 0;
	width: 100%;
}
.stu-list-tags {
	display: inline-block;
	padding: 0 10px 12px;
	width: 100%;
}
.student-gall-list {
	padding: 0;
}
.student-gall-list.border-effect li img {
	width: 100%;
}
.student-gall-list figure img {
	width: 100%;
}
.gallery-more-no {
	background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
	color: #ffffff;
	align-items: center;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	display: flex;
}
.col-sm-3-add {
	margin: 0 0 20px;
}
.block-width.gallery-grid-st {
  display: flex;
  flex-wrap: wrap;
}
.col-sm-3-add {
  flex: 1 0 25%;
	margin: 0 0 20px;
	width: 100%;
}
.col-sm-3-add.in-view {
	animation: myfirst 1.5s linear alternate;
	-webkit-animation: myfirst 1.5s linear alternate;
}
 @-webkit-keyframes myfirst {
 from {
opacity:0;
transform: translate3d(0px, 150%, 0px);
-weblit-transform: translate3d(0px, 150%, 0px);
}
to {
	opacity: 1;
	transform: translate3d(0px, 0%, 0px);
	-weblit-transform: translate3d(0px, 0px, 0px);
}
}
.student-page-banner {
	background: rgba(0, 0, 0, 0) url("../img/banner-student-page.jpg") no-repeat scroll center center;
}
.middle-pop.modal .modal-dialog {
	align-items: center;
	display: flex !important;
	height:...