JSFiddle - React, Tailwind, and code Playground

HTML

<!-- html for talemetry project -->

<div class="outercontainer">
	<div class="slidecontainer slide1">
		<div class="innercontainer">
			<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
			<div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract &amp; engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p>
			</div>
			<div class="ctabutton"> 
				<p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p>
				<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
				<h3 class="ctaaction">Let's Talk >></h3>
			</div>
		</div>
	</div>
	<div class="slidecontainer slide2 hiddenslide">
		<div class="innercontainer">
			<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
			<div class="prodpara"><h2>Source &amp; CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p>
			</div>
			<div class="ctabutton"> 
				<p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
				<img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
				<h3 class="ctaaction">Request a Demo >></h3>
			</div>
		</div>
	</div>
	<div class="slidecontainer slide3 hiddenslide">
		<div class="innercontainer">
			<img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
			<div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from...

CSS

/* CSS for homepage redo */

.outercontainer {
	width:100%;
}


.slidecontainer {
	width:100%;
	height:285px;
}

.slidecontainer.hiddenslide {
	display:none;
}

.slidecontainer.slide1 {
background-color:#b7be10;
}

.slidecontainer.slide2 {
background-color:#374bb5;
}

.slidecontainer.slide3 {
background-color:#ef123e;
}

.slidecontainer.slide4 {
background-color:#efae00;
}

.slidecontainer.slide5 {
background-color:#9d5bb6;
}

.slidecontainer .innercontainer {
	max-width:940px;
}

img.productimg {
	float:right;
}

.prodpara > H2 {
	font-size:30px;
	color:#fff;
}

.prodpara > p {
	font-size:18px;
	color:#fff;
}

.ctabutton p.ctatext {
	font-size:15px;
}

p.ctaline {
	font-size:;
}

h3.ctaaction {
	font-size:20px;
}

.iconcontainer {
	max-width:940px;
	width:100%;
	margin:0 auto;
}

.iconcontainer .icon {
	float:left;
	width:90px;
	text-align: center;
}

.iconcontainer .icon p {
	color:#585858;
	font-size: 14px;
}

JavaScript

$('.iconcontainer .icon').on(
	{
		mouseenter: function()
		{
			$('.outercontainer .slidecontainer').addClass('hiddenslide');
			var show_slide = $(this).attr('data-slide');
			$('.' + show_slide).removeClass('hiddenslide');
		}
	});