JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<div id="container">
		<div id="row">
			<div class="cell A1"><img class="spacer" src="http://imgur.com/t5M1ryQ"><div id="text">MIKEY<br/><p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div></div>
			<div class="cell A2"><img class="spacer" src="http://imgur.com/t5M1ryQ"><div id="text">ERIC<br/><p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div></div>
			<div class="cell A3"><img class="spacer" src="http://imgur.com/t5M1ryQ"><div id="text">MIKEY<br/><p>EPHEMERA</p>DIGITAL COLLAGE</div></div>
			<div class="cell A4"><img class="spacer" src="http://imgur.com/t5M1ryQ"><div id="text">ERIC<br/><p>REJJIE SNOW</p>SITE DESIGN</div></div>
			</div>

CSS

.A1, .A2, .A3, .A4 {
		position:relative;
		}
		
		.A1:before, .A2:before, .A3:before, .A4:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		transition: opacity .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out;
		-webkit-transition: -webkit-filter .2s ease-in-out;
 		filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(90%) brightness(30%); /* Google Chrome, Safari 6+ & Opera 15+ */ 
		z-index: -1;
		}
		
		.A1:before {background-image:url('spindrift.jpg'); background-size:cover;}
		.A2:before {background-image:url('daynnite.jpg'); background-size:cover;}
		.A3:before {background-image:url(''); background-size:cover;}
		.A4:before {background-image:url(''); background-size:cover;}

		
		.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before {
		-webkit-filter:none;
		}
		
			/* text hover */
		div.cell:hover #text{
		opacity:0;
		}

		#text{
		opacity:1;
		display:table;
		position:absolute;
		z-index:999;
		color:#ffffff;
		text-align:center;
		width:100%;
		top:44%;
		left:0;
		text-decoration:none;
		}
		
		p {
		font:16px ProximaNovaBold, sans serif;
		margin:0;
		padding:1 0 1 0;
		}
			/* table rules */
		#container{
		display:table-row;
		width:100%;
		}
		
		#row{
		display:table-row;
		width:100%;
		}
		
		.cell{
		position:relative;
		display:table-cell;
		width:700px;
		height:auto;
		}
		
		html{
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		}
		
		body{
		height:100%;
		width:100%;
		margin:0;
		padding:0;
		background-color:black;
		color:black;
		}

			/* image SPACER rules */
		img{
		max-height:600px;
		max-width:100%;
		height:auto;
		width:100%;
		z-index:2;
		}