JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<div id="header">
			HEADER
		</div>
	</div>
		
	<div id="main">

		<div class="heading">Events</div>

		<div id="icons">

			<div class="icon1" onclick="expand(this);" id="">
				<div class="boxfortitle">
					<img class="iconcentre" src="icons/programming.png" alt="Programming">
					<div class="title">
					Programming
					</div>
				</div>
				<div class="cross" onclick="collapse(event);" id="test">
					<div class="line1"></div>
					<div class="line2"></div>
				</div>
				<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi, provident blanditiis nam suscipit at, recusandae maiores! Fugiat a nisi labore natus magnam, deleniti voluptate alias, porro nulla atque soluta? <br> <br><br><br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, officia veniam a atque voluptatibus, illum ratione recusandae enim reiciendis ipsam sunt unde, totam, nobis rerum beatae incidunt iure quisquam obcaecati.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi, provident blanditiis nam suscipit at, recusandae maiores! Fugiat a nisi labore natus magnam, deleniti voluptate alias, porro nulla atque soluta? <br> <br><br><br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, officia veniam a atque voluptatibus, illum ratione recusandae enim reiciendis ipsam sunt unde, totam, nobis rerum beatae incidunt iure quisquam obcaecati.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi, provident blanditiis nam suscipit at, recusandae maiores! Fugiat a nisi labore natus magnam, deleniti voluptate alias, porro nulla atque soluta? <br> <br><br><br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, officia veniam a atque voluptatibus, illum ratione recusandae enim reiciendis ipsam sunt unde, totam, nobis rerum beatae incidunt iure quisquam obcaecati.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi, provident blanditiis...

CSS

*{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: green;
}

#header{
	position: fixed;
	top: 0px;
	height: 65px;
	width: 100%;
	background-color: red; 
	z-index: 100;
}

#main{
	position: relative;
	top: 70px;
}

.heading{
	text-align: center;
	font-family: 'Proxima Nova';
	font-size: 35px;
	padding : 10px;
	color: white; 
}

#icons{
	position: relative;
	max-width: 798px;
	height: 600px;
	margin:auto;
	color: white;
	margin-bottom: 10px;
}

	.icon1{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 266px;
		height: 200px;
		background-color: #cb3333;
		overflow: hidden;
		-webkit-transition : all 0.5s linear;
	}

	.icon1ex{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #cb3333;
		z-index: 99;
		-webkit-transition : width 0.5s linear, height 0.5s linear 0.5s;
	}

	.icon2{
		position: absolute;
		left: 266px;
		top: 0px;
		width: 266px;
		height: 200px;
		background-color: #e57f2c;
		-webkit-transition : all 0.5s linear;
	}

	.icon2ex{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #e57f2c;
		z-index: 99;
		-webkit-transition :left 0.5s linear, width 0.5s linear, height 0.5s linear 0.5s;
	}

	.icon3{
		position: absolute;
		left: 532px;
		top: 0px;
		width: 266px;
		height: 200px;
		background-color: #f8d720;
		-webkit-transition : all 0.5s linear;
	}

	.icon3ex{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #f8d720;
		z-index: 99;
		-webkit-transition :left 0.5s linear, width 0.5s linear, height 0.5s linear 0.5s;
	}

	.icon4{
		position: absolute;
		left: 0px;
		top: 200px;
		width: 266px;
		height: 200px;
		background-color: #93df0f;
		-webkit-transition : all 0.5s linear;
	}

	.icon4ex{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #93df0f;
		z-index: 99;
		-webkit-transition: left 0.5s linear, width 0.5s linear, top 0.5s linear 0.5s, height...

JavaScript

function expand (x) {
	var tester = x.className.substr(5,7);
	if(tester != "ex"){
	x.className = x.className+"ex";
	var cross = x.getElementsByClassName('cross');
	for (var i = 0; i < cross.length; i++) {
		cross[i].className = "crossshown";
	};
	var icon = x.getElementsByClassName('boxfortitle');
	for (var j = 0; j < icon.length; j++) {
		icon[j].className = "boxfortitlebig";
	};
	var info = x.getElementsByClassName('info');
	for (var k = 0; k < info.length; k++) {
		info[k].className = "infoshown";
	};
	x.id="opened";
}
}

function collapse (event) {
	var classOfParent = event.currentTarget.parentNode.className;
	var newClassName = classOfParent.substr(0,5);
	event.currentTarget.parentNode.className = newClassName;
    event.stopPropagation();
}