JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<div class="vc_col-sm-4 wpb_column vc_column_container ">
		<div class="wpb_wrapper">
			<h1>October 3</h1><ul class="schedule-overview"><li>
		<div class="schedule-title">
			<span class="time">9:30am - 11:30am</span>
			<span class="title">Welcome &amp; Registration</span>
		</div>
		
		<div class="schedule-text"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
</div>
		
		<div class="marker-pin">
			<div class="top"></div>
			<div class="middle"></div>
			<div class="bottom"></div>
		</div>
	</li><li>
		<div class="schedule-title">
			<span class="time">11:30am - 1pm</span>
			<span class="title">Improving WordPress Workflow</span>
		</div>
		
		<div class="schedule-text"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
</div>
		
		<div class="marker-pin">
			<div class="top"></div>
			<div class="middle"></div>
			<div class="bottom"></div>
		</div>
	</li><li>
		<div class="schedule-title">
			<span class="time">1pm - 2pm</span>
			<span class="title">Catered Lunch</span>
		</div>
		
		<div class="schedule-text"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
</div>
		
		<div class="marker-pin">
			<div class="top"></div>
			<div class="middle"></div>
			<div class="bottom"></div>
		</div>
	</li><li>
		<div class="schedule-title">
			<span class="time">2pm - 3:30pm</span>
			<span class="title">Advanced MySQL Usage</span>
		</div>
		
		<div class="schedule-text"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti...

CSS

body{
	background:#eee;
	color:;
	font-family:Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:14px;
	font-smoothing:antialiased;
	line-height:24px;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
}
ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

.schedule-overview{
	border:2px solid rgba(0,0,0,0.2);
	margin-bottom:36px;
}

.schedule-overview li{
	-moz-transition:all .3s ease-out;
	transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
	cursor:pointer;
	padding:24px;
	position:relative;
}

.schedule-overview li:first-child .top{
	display:none;
}

.schedule-overview li:last-child .bottom{
	display:none;
}

.schedule-title span{
	display:block;
	font-size:16px;
}

.schedule-title .title{
	color:#333;
}

.schedule-text{
	-moz-transition:all .3s ease-out;
	transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
	max-height:0px;
	opacity:0;
}

.schedule-overview li:hover{
	background-color:#f5f5f5;
}

.schedule-overview li:hover .schedule-text{
	max-height:300px;
	opacity:1;
	padding-top:18px;
}

.schedule-overview li:hover .top,.schedule-overview li:hover .bottom,.schedule-overview li:hover .middle{
	border-color:rgba(0,0,0,0.4);
}

.schedule-overview li:hover .middle{
	background:#333;
}

.schedule-with-text .btn,.contained-gallery .btn{
	margin-right:12px;
	margin-top:24px;
}

.schedule-with-text .schedule-overview li{
	padding-right:48px;
}

@media all and (max-width: 1024px){
	.schedule-overview li{
		padding-right:48px;
	}

}

@media all and (max-width: 767px){
	.schedule-with-text .btn,.contained-gallery .btn{
		margin-bottom:32px;
	}

}

.marker-pin{
	height:100%;
	position:absolute;
	right:32px;
	top:0px;
}

.marker-pin .top,.marker-pin .bottom{
	-moz-transition:all .3s ease-out;
	transition:all .3s ease-out;
	-webkit-transition:all .3s ease-out;
	border-left:2px solid rgba(0,0,0,0.2);
	height:50%;
	position:absolute;
	width:2px;
	z-index:1;
}

.marker-pin .top{
	top:0px;
}

.marker-pin...