JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div id="wrapper">		
<div id="circleWrapper">
			<div id="circleMain">
				<div>hello</div>
			</div>
			<div id="circleLineFacebook" class="circleLine">
				<a href="#anchorFacebook">
					<div id="circleFb" class="circle">
						<span>circle 1</span>
					</div>
				</a>
			</div>
			<div id="circleLineApple" class="circleLine">
				<a href="#anchorApps">
					<div id="circleApple" class="circle">
						<span>circle 2</span>
					</div>
				</a>
			</div>
			<div id="circleLineAndroid" class="circleLine">
				<a href="#anchorApps">
					<div id="circleAndroid" class="circle">
						<span>circle 3</span>
					</div>
				</a>
			</div>
			<div id="circleLineJoomla" class="circleLine">
				<a href="#anchorJoomla">
					<div id="circleJoomla" class="circle">
						<span>circle 4</span>
					</div>
				</a>
			</div>
			<div id="circleLineWordpress" class="circleLine">
				<a href="#anchorWordpress">
					<div id="circleWordpress" class="circle">
						<span>circle 5</span>
					</div>
				</a>
			</div>
			<div id="circleLineHtml5" class="circleLine">
				<a href="#anchorHtml5">
					<div id="circleHtml5" class="circle">
						<span>circle 6</span>
					</div>
				</a>
			</div>
			<div id="circleLineFlash" class="circleLine">
				<a href="#anchorFlash">
					<div id="circleFlash" class="circle">
						<span>circle 7</span>
					</div>
				</a>
			</div>
			<div id="circleLineMagento" class="circleLine">
				<a href="#anchorMagento">
					<div id="circleMagento" class="circle">
						<span>circle 8</span>
					</div>
				</a>
			</div>
		</div>
</div>

CSS

body {
background-color: #e6e6e6;
}

#wrapper {
	margin: auto;
	width: 950px;
	padding: 100px 0 0 0;
	position: relative;
}

#circleWrapper {
	position: relative;
	top: 50px;
	left: 200px;
	float: left;
	z-index: 9999;
    font-size: 12px;
}

/* Main circle */
#circleMain {
	position: absolute;
	border-radius: 50%;
	background-color: #c0c0c0;
	width: 204px;
	height: 204px;
	z-index: 999;
}

#circleMain span {
	position: absolute;
	font-size: 1.4em;

}

#circleMain div {
	display: block;
	font-size: 3em;
	text-align: center;
	margin: 65px 0 0 0;
}
/* */

.circleLine {
	position: absolute;
	width: 9px;
	height: 153px;
	background: #ffffff;
	/* Centering lines and adjusting reg point for rotation */
	left: 99.25px;
	top: 0px;
	transform-origin: center bottom;
	-moz-transform-origin: center bottom; /* Firefox */
	-ms-transform-origin: center bottom; /* IE 9 */
	-webkit-transform-origin: center bottom; /* Safari and Chrome */
	-o-transform-origin: center bottom; /* Opera */
	z-index: 900;
	/* */
}

/* Circle logos */
.circle {
	position: absolute;
	top: -40px;
	left: -16px;
	border-radius: 50%;
	width: 41px;
	height: 41px;
	z-index:998;
	box-shadow: 0 2px 2px #d5d5d5;
	font-size: 1.4em;
	color: #b6b6b6;
}

.circle span {
	position: absolute;
	width: 90px;
	font-weight: 700;
	visibility: hidden;
}

.circleFb, #circleFb {
	background: url(http://www.stockrip.com/images/question_mark_icon.gif) no-repeat 11px 11px #ffffff;
}

#circleFb span {
	bottom: 50px;
	left: -7px;
}

.circleApple, #circleApple {
	background: url(http://www.stockrip.com/images/question_mark_icon.gif) no-repeat 13px 10px #ffffff;
}

#circleApple span {
	bottom: 14px;
	left: 50px;
}

.circleAndroid, #circleAndroid {
	background: url(http://www.stockrip.com/images/question_mark_icon.gif) no-repeat 10px 7px #ffffff;
}

#circleAndroid span {
	bottom: 14px;
	left: 50px;
}

.circleJoomla, #circleJoomla {
	background: url(http://www.stockrip.com/images/question_mark_icon.gif) no-repeat 9px 10px...

JavaScript

var easingTypeOut = "Power2.easeOut";

//Run intro "fold out"
var tl = new TimelineLite();

tl.to("#circleWrapper", 2, {autoAlpha: 1, ease:easingTypeOut}, "-=0.5");
tl.to(".circleLine", 1.5, {css:{top: "-51px"}, ease:easingTypeOut}, "-=1");
tl.to("#circleLineApple", 0.5, {rotation: 45, ease:easingTypeOut});
tl.to("#circleLineAndroid", 0.5, {rotation: 90, ease:easingTypeOut}, "-=0.3");
tl.to("#circleLineJoomla", 0.5, {rotation: 135, ease:easingTypeOut}, "-=0.3");
tl.to("#circleLineWordpress", 0.5, {rotation: 180, ease:easingTypeOut}, "-=0.3");
tl.to("#circleLineHtml5", 0.5, {rotation: 225, ease:easingTypeOut}, "-=0.3");
tl.to("#circleLineFlash", 0.5, {rotation: 270, ease:easingTypeOut}, "-=0.3");
tl.to("#circleLineMagento", 0.5, {rotation: 315, ease:easingTypeOut, onComplete:circleStart}, "-=0.3");
tl.to("#circleWrapper", 2, {css:{left: "140px"}, ease:easingTypeOut}, "-=0.2");
tl.to("#circleWrapper div.circle span", 1, {autoAlpha: 1, ease:easingTypeOut}, "-=1");