JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TimelineMax.min.js"></script>
<div class="icons">
  <div class="icon">
    <svg version="1.1" x="0" y="0" width="100%" height="100%" viewBox="0 0 207.19 159.9" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#0D1210" d="M103.59 35.58c-21.23 0-38.45 17.22-38.45 38.46 0 27.89 24.48 29.93 24.48 49.51v2.91c-1.02 0-1.89 0.38-2.39 1.29 -0.26 0.47-0.4 1.02-0.4 1.55 0 1.63 1.03 2.78 2.67 2.84l0.12-0.02v1.43c-1.02 0-1.89 0.38-2.39 1.29 -0.26 0.46-0.4 1.02-0.4 1.55 0 1.63 1.03 2.79 2.67 2.84l3.02-0.55c1.88 3.32 6.14 5.64 11.07 5.64 6.66 0 12.09-4.22 12.09-9.41 0-0.15-0.01-0.29-0.02-0.43l1.77-0.32h0.12c1.03 0 1.9-0.39 2.4-1.29 0.26-0.47 0.38-1.02 0.38-1.55 0-1.63-1.01-2.78-2.66-2.84l-0.12 0.02v-1.43c1.03 0 1.9-0.38 2.4-1.3 0.26-0.46 0.38-1.01 0.38-1.54 0-1.63-1-2.78-2.64-2.84 1.98-19.64 24.35-19.34 24.35-47.35C142.06 52.8 124.83 35.58 103.59 35.58zM108.98 96.64l-0.24 1.3 -0.22 1.33 -0.21 1.36 -0.19 1.39 -0.17 1.4 -0.16 1.42 -0.12 1.43 -0.11 1.43 -0.08 1.43 -0.05 1.42 -0.03 1.4v1.39l0.03 1.37 0.05 1.35 0.09 1.31 0.13 1.27 0.14 1.23 0.18 1.17 0.23 1.13 0.26 1.07 0.05 0.16 -10.32 1.88 0.27-0.77 0.32-1.08 0.28-1.13 0.23-1.16 0.19-1.21 0.15-1.25 0.12-1.28 0.09-1.31 0.04-1.33 0.01-1.35 -0.02-1.37 -0.04-1.38 -0.08-1.38 -0.12-1.39 -0.12-1.39 -0.16-1.38 -0.18-1.36 -0.2-1.35 -0.23-1.34 -0.24-1.31 -0.26-1.27 -0.28-1.25L97.71 96l-0.31-1.16 -0.32-1.13 -0.2-0.62 0.69-0.17 0.7-0.22 0.69-0.27 0.68-0.31 0.65-0.36 0.63-0.39 0.57-0.43 0.55-0.45 0.52-0.48 0.08-0.08 0.4 0.36 0.44 0.36 0.46 0.32 0.46 0.28 0.47 0.26 0.5 0.23 0.49 0.18 0.51 0.16 0.51 0.13 0.53 0.1 0.54 0.07 0.55 0.04 0.56 0.01 0.55-0.03 0.37-0.03 -0.16 0.63 -0.29 1.17 -0.27 1.21L108.98 96.64zM101.91 85.21l-0.33-0.69 -0.26-0.69 -0.22-0.63 -0.13-0.6 -0.07-0.54 -0.02-0.5 0.03-0.44 0.07-0.4 0.12-0.34 0.14-0.28 0.15-0.22L101.5 79.75l0.05-0.04 0 0 0.12-0.01...

CSS

.icon {
	width: 30%;
	text-align: center;
	color: #333;
	left: 0px;
	display: inline;
	float: left;
	margin: 0px 0px 4% 2.5%; position: absolute
}
.icon:nth-of-type(1) {
	top: 2em; left: 0;
}
.icon:nth-of-type(2) {
	top: 2em; left: 33%;
}
.icon:nth-of-type(3) {
	top: 2em; left: 65%;
}
.icon:nth-of-type(4) {
	top: 13em; left: 0;
}
.icon:nth-of-type(5) {
	top: 13em; left: 33%;
}
.icon:nth-of-type(6) {
	top: 13em; left: 65%;
}
.icon:nth-of-type(7) {
	top: 24em; left: 0;
}
.icon:nth-of-type(8) {
	top: 24em; left: 33%;
}
.icon div {
	width: 100%; text-align: left;
	position: absolute;
	display: none;
	right: -95%; top: -2em;
}
.icon div h1 {
	opacity: 0;
}
.icon ul {
	margin: 0;
}
.icon li {
	margin: 0 0 4% 0; opacity: 0; color: #3688BC; font-size: 90%;
}
.icon li span {
	color: #666
}
.icon li:nth-of-type(2) {
	margin-left: -5%
}
.icon li:nth-of-type(3) {
	margin-left: -10%
}
.icon li:nth-of-type(4) {
	margin-left: -17%
}
.icon li:nth-of-type(5) {
	margin-left: -22%
}

JavaScript

/*global TweenLite,TweenMax,TimelineMax,Power0,Power2,Power4,Back,Bounce,Elastic*/
var APP={};
APP.icons=null;
APP.currentActiveIcon=APP.previousActiveIcon= -1;
APP.moveOutTimelines=[];
APP.focusInTimelines=[];
APP.moveOutDuration=.8;
APP.focusInDuration=.6;
APP.moveOutEase=Back.easeIn;
APP.focusInEase=Power2.easeInOut;
APP.init=function(){
	APP.icons=document.querySelectorAll('.icon');
	APP.initFocusInTweens();
	APP.initMoveOutTweens();
	APP.initListeners();
};
APP.initListeners=function(){
	for(var i=0; i<APP.icons.length; i+=1){
		(function(index){
			(window.addEventListener)?APP.icons[i].addEventListener('click',function(event){APP.onIconClicked(event,index);},false):APP.icons[i].attachEvent('onclick',function(event){APP.onIconClicked(event,index);});
		})(i);
	}
};
APP.initFocusInTweens=function(){
	var span,content,header,listItems;
	for(var i=0; i<APP.icons.length; i+=1){
		span=APP.icons[i].querySelector('span');
		content=APP.icons[i].querySelector('div');
		header=content.querySelector('h2');
		listItems=content.querySelectorAll('li');
		APP.focusInTimelines[i]=new TimelineMax({
			paused:true,
			onStartParams:[content],
			onReverseCompleteParams:[content],
			onStart:function(content){TweenMax.set(content,{display:'block'});},
			onReverseComplete:function(content){TweenMax.set(content,{clearProps:'display'});}
		});
		APP.focusInTimelines[i].to(APP.icons[i],APP.focusInDuration,{width:'46%',top:'2em',left:'-2%',ease:APP.focusInEase},0);
		APP.focusInTimelines[i].fromTo(span,APP.focusInDuration,{autoAlpha:1},{autoAlpha:0,ease:APP.focusInEase},APP.focusInDuration*.4);
		APP.focusInTimelines[i].fromTo(header,APP.focusInDuration,{autoAlpha:0},{autoAlpha:1,ease:APP.focusInEase},APP.focusInDuration*.4);
		APP.focusInTimelines[i].staggerFromTo(listItems,APP.focusInDuration,{autoAlpha:0},{autoAlpha:1,ease:APP.focusInEase},APP.focusInDuration*.2,APP.focusInDuration*.4);
	}
};
APP.initMoveOutTweens=function(){
	for(var i=0; i<APP.icons.length;...