JSFiddle - React, Tailwind, and code Playground

by Peter Richards

HTML

<div id="section2">
			<div id="section2-container">
				<div id="features-images">
					<div class="featureicon" id="feature1">
						<img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
					</div>
					<div class="featureicon" id="feature2">
						<img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
					</div>
					<div class="featureicon" id="feature3">
						<img class="featureiconimage" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png">
					</div>
				</div>
			</div>
		</div>

CSS

#section2{
	width: 100%;
	height: 650px;
	/*background-color: #f5f7f9;*/
	position:relative;
    background-color:#e15915;
}

#section2:after{
	content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 50px #e15915;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

#section2-container{
	margin: 0 auto;
	width: 1100px;
}

#features-images{
	margin: 0 auto;
	width: 632px;
}

.featureicon{
	margin-top: 50px;
	width: 175px;
	height: 175px;
	display: inline-block;
}

.featureiconimage{
	width: 100%;
}

#feature2{
	margin-left: 50px;
	margin-right: 50px;
}

.featureicon:hover{
	cursor: pointer;
	border-bottom: 5px solid white;
}

.iconunderline{
	border-bottom: 5px solid white;
}

JavaScript

$(document).ready(function () {
		$("#feature1").addClass("iconunderline");
		$("#feature2").removeClass("iconunderline");
		$("#feature3").removeClass("iconunderline");
	})

	$("#feature1").click(function () {
		$("#feature1").addClass("iconunderline");
		$("#feature2").removeClass("iconunderline");
		$("#feature3").removeClass("iconunderline");
	})

	$("#feature2").click(function () {
		$("#feature1").removeClass("iconunderline");
		$("#feature2").addClass("iconunderline");
		$("#feature3").removeClass("iconunderline");
	})

	$("#feature3").click(function () {
		$("#feature1").removeClass("iconunderline");
		$("#feature2").removeClass("iconunderline");
		$("#feature3").addClass("iconunderline");
	})