JSFiddle - React, Tailwind, and code Playground

by ASHISH ROX

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- SERVICES -->
				<div class="services_block padbot40" data-appear-top-offset="-200" data-animated="fadeInUp">
					
					<!-- ROW -->
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-4 margbot30">
							<div class="services_item bg1 center">
								<i class="fa fa-laptop"></i>
								<p>Web Design</p>
								<span>In et massa a massa egestas suscipit tincidunt ut est. Curabitur rutrum faucibus elit, at convallis diam mattis eget.</span>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4 margbot30">
							<div class="services_item bg2 center">
								<i class="fa fa-gear"></i>
								<p>Development</p>
								<span>In et massa a massa egestas suscipit tincidunt ut est. Curabitur rutrum faucibus elit, at convallis diam mattis eget.</span>
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4 margbot30">
							<div class="services_item bg3 center">
								<i class="fa fa-pencil"></i>
								<p>Marketing</p>
								<span>In et massa a massa egestas suscipit tincidunt ut est. Curabitur rutrum faucibus elit, at convallis diam mattis eget.</span>
							</div>
						</div>
					</div><!-- //ROW -->
				</div><!-- //SERVICES -->
			<!-- //CONTAINER -->

CSS

.margbot0 {margin-bottom:0;}
.margbot5 {margin-bottom:5px !important;}
.margbot10 {margin-bottom:10px;}
.margbot20 {margin-bottom:20px;}
.margbot25 {margin-bottom:25px;}
.margbot30 {margin-bottom:30px !important;}
.margbot40 {margin-bottom:40px;}
.margbot50 {margin-bottom:50px;}
.margbot60 {margin-bottom:60px;}
.margbot70 {margin-bottom:70px;}
.margbot80 {margin-bottom:80px;}

.pad0 {padding:0 !important;}
.padbot0 {padding-bottom:0 !important;}
.padbot10 {padding-bottom:10px !important;}
.padbot20 {padding-bottom:20px !important;}
.padbot30 {padding-bottom:30px !important;}
.padbot40 {padding-bottom:40px !important;}
.padbot50 {padding-bottom:50px !important;}
.padbot60 {padding-bottom:60px !important;}
.padbot70 {padding-bottom:70px !important;}
.padbot80 {padding-bottom:80px !important;}
.padtop0 {padding-top:0 !important;}
/* __________ Services __________ */
.services_item {
	position:relative;
	display:block;
	padding:80px 25px 0;
}
.services_item:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:2px;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.services_item.bg1:before {background-color: #F5C700;}
.services_item.bg2:before {background-color: #ef4836;}
.services_item.bg3:before {background-color: #0EBA9E;}
.services_item:hover:before {height:6px;}

.services_item i {
	position:relative;
	display:block;
	width:130px;
	height:130px;
	margin:0 auto 25px;
	line-height:130px;
	font-size:70px;
	color:#fff;
	border-radius:50%;
	cursor:default;
	transition: all 0.3s ease-in-out; 
	-webkit-transition: all 0.3s ease-in-out;
}
.services_item.bg1 i {box-shadow: 0 0 0 75px #F5C700 inset;}
.services_item.bg2 i {box-shadow: 0 0 0 75px #ef4836 inset;}
.services_item.bg3 i {box-shadow: 0 0 0 75px #0EBA9E inset;}
.services_item.bg1:hover i {box-shadow: 0 0 0 3px #F5C700 inset; color:#F5C700;}
.services_item.bg2:hover i {box-shadow: 0 0 0 3px #ef4836 inset; color:#ef4836;}
.services_item.bg3:hover i {box-shadow:...