JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<article class="projects projects-all"> <div class="overlay overlay-hidden"></div> <div class="projects-container"> <a class="project" href="http://www.panicstudio.tv/en/works/vault" target="_blank" data-id="79" data-url="vault"> <div class="project-container" style="height: 418px;"> <div class="background-container"> <img class="background" src="http://www.panicstudio.tv/assets-user/misc/vault_thumbnail.jpg" alt="" style="width: 628px; height: auto; margin-left: 0px; margin-top: -84.1667px;"> <div class="background-hover"></div> </div> <div class="data-table"> <div class="data-cell"> <div class="button"> <div class="sprite-anim-go"></div> </div> <p class="title">VAULT - REDUCE RISK. INCREASE REWARDS</p> <p class="client">CLIENT - SPINFLUENCE</p> </div> </div> </div> </a> <a class="project" href="http://www.panicstudio.tv/en/works/swisscom" target="_blank" data-id="75" data-url="swisscom"> <div class="project-container" style="height: 418px;"> <div class="background-container"> <img class="background" src="http://www.panicstudio.tv/assets-user/misc/cover_web3.jpg" alt="" style="width: 628px; height: auto; margin-left: 0px; margin-top: -84.1667px;"> <div class="background-hover"></div> </div> <div class="data-table"> <div class="data-cell"> <div class="button"> <div class="sprite-anim-go"></div> </div> <p class="title">PEOPLE INSPIRE PEOPLE</p> <p class="client">CLIENT - CLEVERCLIP</p> </div> </div> </div> </a> <a class="project" href="http://www.panicstudio.tv/en/works/travel-addicts-s02" target="_blank" data-id="73" data-url="travel-addicts-s02"> <div class="project-container" style="height: 418px;"> <div class="background-container"> <img class="background" src="http://www.panicstudio.tv/assets-user/misc/BASE_WORKS.jpg" alt="" style="width: 628px; height: auto; margin-left: 0px; margin-top: -84.1667px;"> <div class="background-hover"></div> </div> <div class="data-table"> <div class="data-cell"> <div class="button"> <div class="sprite-anim-go"></div> </div> <p...

CSS

.project-container{
   width:100%;
   height:320px;
   position:relative;
   text-align:center;
   -moz-background-clip:content;
   -o-background-clip:content-box;
   -webkit-background-clip:content;
   background-clip:content-box;
   -webkit-transition:height 500ms ease;
   -moz-transition:height 500ms ease;
   -o-transition:height 500ms ease;
   transition:height 500ms ease
   }
   
.project .background-container{
	position:absolute;
	width:100%;
	height:100%;
	overflow:hidden
}
	
.project .background{
	position:absolute;
	top:0;
	left:0;
	height:auto;
	width:150%;
	z-index:0;
	-webkit-transform:skewY(10deg)scale(1,1);
	-moz-transform:skewY(10deg)scale(1,1);
	-o-transform:skewY(10deg)scale(1,1);
	-ms-transform:skewY(10deg)scale(1,1);
	transform:skewY(10deg)scale(1,1);
	-webkit-transition:-webkit-transform 200ms ease;
	-moz-transition:-moz-transform 200ms ease;
	-o-transition:-o-transform 200ms ease;
	transition:transform 200ms ease
}

.project .background-hover, .project .button{
	-moz-transition:opacity 200ms ease;
	-o-transition:opacity 200ms ease;
	transition:opacity 200ms ease;
	-webkit-transition:opacity 200ms ease
}

.project .background-hover{
	top:0;
	left:-2%;
	width:105%;
	height:100%;
	background-color:#080D14;
	z-index:5;
	opacity:0;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter:alpha(Opacity=0);
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1)}
	
	
	-------------------------------------
	
.project .data-table{
	height:100%;
	display:table;
	z-index:10;margin:0 auto;opacity:0;filter:alpha(Opacity=0);-webkit-transform:skewY(10deg);-moz-transform:skewY(10deg);-o-transform:skewY(10deg);-ms-transform:skewY(10deg);transform:skewY(10deg)}
	
	
	#showreel-modal,.project .button,.project .data-table{-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0)}
	
	.project...