JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="services-container">
	<div class="services small">
	</div>
	<div class="services medium">
	</div>
	<div class="services large">
	</div>
</div>

SCSS

i.fa {
	display: block;
}

.services-container {
	margin: 0 auto;
	position: relative;
}

.services {
	border-bottom: 1px solid black;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
	margin-bottom: 50px;
	padding-bottom: 50px;
	text-align: center;
}
.small {
	i {
		font-size: 2em;
	}
}
.medium {
	i {
		font-size: 4em;
	}
}
.large {
	i {
		font-size: 6em;
	}
	.service {
		width: 50%;
	}
}
.service {
	width: calc(100%/3);
	&:after {
		content: '';
		display: block;
		height: 10px;
		margin: 0 auto;
		position: relative;
		width: 10px;
		z-index: 10;
	}
	&.active {
		&:after {
			background-color: #888;
		}
		.more-info {
			background-color: #888;
			border-radius: 3px;
			box-shadow: 0 0 5px rgba(0,0,0,0.5);
			display: block;
			margin-top: 10px;
			left: 0;
			position: absolute;
			right: 0;
			z-index: 5;
		}
	}
}
.more-info {
	display: none;
}

@media screen and (min-width: 480px) {
	.large .service {
		width: calc(100%/3);
	}
}

@media screen and (min-width: 960px) {
	.services-container {
		width: 960px;
	}
	.service {
		width: calc(100%/6);
	}
	.large .service {
		width: calc(100%/4);
	}
}

JavaScript

var servicesContainer = document.getElementsByClassName('services');
for(var i = 0; i < servicesContainer.length; i++) {
	for(var j = 0; j < 27; j++) {
		servicesContainer[i].innerHTML += '<div class="service"><i class="fa fa-apple"></i>Service #' + j + '<div class="more-info"><h2>Service #' + j + '</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius tincidunt libero quis dignissim. Phasellus diam metus, rutrum ac varius in, egestas non ligula. Vestibulum semper eros ante, sed consectetur mi dignissim a. Cras sit amet odio ut odio varius faucibus at non justo. Maecenas ut semper lacus, a hendrerit ante. In non sapien ac tellus egestas iaculis in venenatis nunc. Vestibulum ac viverra velit.</p></div></div>';
	}
}

var services = document.getElementsByClassName('service');
for(var i = 0; i < services.length; i++) {
	services[i].onclick = function() {
		this.classList.toggle('active');
	}
}