JSFiddle - React, Tailwind, and code Playground

by trajce

HTML

<div id="container">
    <div class="content">
		<div class="left">
            <a href="#"><img src="http://dummyimage.com/307x349/000/fff" alt="tyler st salon home" /></a>
		</div><!-- end left -->
		<div class="center">
            <a href="#" class="top about_hover"><img src="http://dummyimage.com/307x166/000/fff" alt="about tyler st salon" class="about_hover" /></a>
                <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon service" class="services_hover" /></a>
		</div><!-- end center -->
		<div class="right">
            <a href="#" class="top"><img src="http://dummyimage.com/307x166/000/fff" alt="tyler st salon products" class="products_hover" /></a>
                <a href="#" class="bottom"><img src="http://dummyimage.com/307x166/000/fff" alt="contact tyler st salon" class="contact_hover" /></a>
		</div><!-- end right -->
	</div><!-- end content -->    
    
</div><!-- end container -->

CSS

html, body, #container, .content, .left, .right, .center {
    height: 100%;
}

#container {
    min-height: 349px;
}

#container {
	margin: 0 auto;
	width: 960px;
}

#container .content {
	margin-top: 115px;
    position: relative;
}

#container .content .left,
#container .content .center,
#container .content .right { 
	position: relative;
	width: 307px;
}

#container .content .left {
	float: left;
}

#container .content .center {
	float: left;
	padding-left: 19px;
}

#container .content .right {
	float: right;
}

#container .content .top,
#container .content .bottom {
	position: absolute;
}

#container .content .top {
	top: 0;
}

#container .content .bottom {
	bottom: 0;
}

#container .content .center .about_hover {
	width: 307px;
	height: 166px;
	background: url('http://www.google.com/images/srpr/logo4w.png') center center no-repeat;
}

#container .content .center .services_hover {
	width: 307px;
	height: 166px;
	background: url('img/services_hover.jpg') center center no-repeat;
}

#container .content .center .products_hover {
	width: 307px;
	height: 166px;
	background: url('img/products_hover.jpg') center center no-repeat;
}

#container .content .center .contact_hover {
	width: 307px;
	height: 166px;
	background: url('img/contact_hover.jpg') center center no-repeat;
}
a.top:hover img
{
    display:none;
}