JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://tympanus.net/Tutorials/3DTimeline/js/modernizr.custom.63321.js"></script>
<section class="main">

				<ul class="timeline">

					<li class="event">
						<input type="radio" name="tl-group" checked/>
						<label></label>
						<div class="thumb user-4"><span>19 Nov</span></div>
						<div class="content-perspective">
							<div class="content">
								<div class="content-inner">
									<h3>I find your lack of faith disturbing</h3>
									<p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p>
								</div>
							</div>
						</div>
					</li>

					<li class="event">
						<input type="radio" name="tl-group"/>
						<label></label>
						<div class="thumb user-6"><span>18 Nov</span></div>
						<div class="content-perspective">
							<div class="content">
								<div class="content-inner">
									<h3>I ain't shooting this thing, I hate guns.</h3>
									<p>Ha, didn't even stay for the wedding. Just took his million spacebucks and ran. And you will not call me 'you'. You will never address me as 'you'. You will call me 'your royal highness'. I really must go back. I shouldn't have run away. I realize now that love is one luxury a princess cannot afford. </p>
								</div>
							</div>
						</div>
					</li>

					<li class="event">
						<input type="radio" name="tl-group"/>
						<label></label>
						<div class="thumb user-3"><span>17 Nov</span></div>
						<div class="content-perspective">
							<div class="content">
								<div class="content-inner">
									<h3>My brains are going into my feet! </h3>
									<p>We're done with you. Go back to the golf course and work on your putz. Nah, he got the upside, I got the downside. See...

CSS

@import url('demo.css');

@font-face {
	font-family: 'fontawesome-selected';
	src: url("http://tympanus.net/Tutorials/3DTimeline/css/font/fontawesome-selected.eot");
	src: 
	url("http://tympanus.net/Tutorials/3DTimeline/css/font/fontawesome-selected.eot?#iefix") format('embedded-opentype'), 
	url("http://tympanus.net/Tutorials/3DTimeline/css/font/fontawesome-selected.woff") format('woff'), 
	url("http://tympanus.net/Tutorials/3DTimeline/css/font/fontawesome-selected.ttf") format('truetype'), 
	url("http://tympanus.net/Tutorials/3DTimeline/css/font/fontawesome-selected.svg#fontawesome-selected") format('svg');
	font-weight: normal;
	font-style: normal;
}

.timeline {
	position: relative;
	list-style-type: none;
	padding: 30px 0 50px 0;
	font-family: 'Gorditas', Arial, sans-serif;
}

.timeline:before {
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	top: 0;
	left: 165px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
}

.event {
	position: relative;
	margin-bottom: 80px;
	padding-right: 40px;
}

.thumb {
	position: absolute;
	width: 100px;
	height: 100px;
	box-shadow: 
		0 0 0 8px rgba(65,131,142,1), 
		0 1px 1px rgba(255,255,255,0.5);
	background-repeat: no-repeat;
	border-radius: 50%;
	-webkit-transform: scale(0.8) translateX(24px);
	-moz-transform: scale(0.8) translateX(24px);
	-o-transform: scale(0.8) translateX(24px);
	-ms-transform: scale(0.8) translateX(24px);
	transform: scale(0.8) translateX(24px);
}

.thumb:before {
	content: '';
	position: absolute;
	height: 8px;
	z-index: -1;
	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);
	width: 51px;
	top: 42px;
	left: 100%;
	margin-left: 8px;
}

.thumb span {
	color: #41838e; 
	width: 100%;
	text-align:...