JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<div class="container">	

			
			
			<header class="clearfix">
			
				<h2>CSS Zilla<span>CSS innovation simplified</span></h2>
				<div class="support-note">
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<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>Css zilla</h3>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.css zilla, easy css tricks, css3 basics, css help - CSSZilla</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>Css zilla</h3>
									<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.css zilla, easy css tricks, css3 basics, css help - CSSZilla</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>Css zilla</h3>
									<p>Lorem Ipsum is simply dummy text of the...

CSS

@import url('demo.css');


.timeline {
	position: relative;
	list-style-type: none;
	padding: 30px 0 50px 0;
	font-family:Arial, Helvetica, 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: #fff; 
	width: 100%;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	position: absolute;
	bottom: -30px;
}

.user-1 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-2 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-3 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-4 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-5 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-6 {
	background-image: url(../images/css_zilla.jpg);
	background-size:100%;
}

.user-7 {
	background-image:...

JavaScript

;window.Modernizr=function(a,b,c){function y(a){j.cssText=a}function z(a,b){return y(prefixes.join(a+";")+(b||""))}function A(a,b){return typeof a===b}function B(a,b){return!!~(""+a).indexOf(b)}function C(a,b){for(var d in a){var e=a[d];if(!B(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function D(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}return!1}function E(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),D(e,b,c))}function F(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)s[c[d]]=c[d]in k;return s.list&&(s.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),s}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:e=k.value!=l)),r[a[d]]=!!e;return r}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w={}.hasOwnProperty,x;!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){return w.call(a,b)}:x=function(a,b){return b in a&&A(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var...