JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
				<div class="row bg_main1">	
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">							
						<div class="row about_our_company">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 inner">
								<div class="head"></div>
								
								<div class="body">NT, DESIGN &amp; DIGITAL MARKETING.</div>
							</div>
						</div>
						
						<div class="row services">
							<div class="inner">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 head"></div>		
								
								<ul class="col-xs-12 col-sm-12 col-md-12 col-lg-12 clearfix">
									<li class="corners5 views-row views-row-1 views-row-odd views-row-first">
										<div class="container_li">
											<div class="inner">
												<span class="img_outer">
													<img width="82" height="64" alt="" src="images/services_icons/icon_services_1.png" typeof="foaf:Image">    
												</span>
												<strong class="field-content head">Web development</strong>    
												
												<div class="read_more_outer">
													<a href="/node/7">Read more</a>
												</div>	
											</div>	
										</div>	
									</li>
									
									<li class="corners5 views-row views-row-1 views-row-odd views-row-first">
										<div class="container_li">
											<div class="inner">
												<span class="img_outer">
													<img width="82" height="64" alt="" src="images/services_icons/icon_services_1.png" typeof="foaf:Image">    
												</span>
												<strong class="field-content head">Web development</strong>    
												
												<div class="read_more_outer">
													<a href="/node/7">Read more</a>
												</div>	
											</div>	
										</div>	
									</li>

									<li class="corners5 views-row views-row-1 views-row-odd...

CSS

.services{
	/*background: url("../images/bg_top_block_index.png") repeat-x scroll left bottom #F8F8F8;*/
	padding-bottom: 20px;
    background: red;
    width: 1200px;
}
	
	.services .inner{
		padding: 0 30px;
		overflow: hidden;	
	}

		.services .inner > .head{
			background: url('../images/services_head.png') center top no-repeat;
			height: 44px;
			padding-bottom: 25px;		
		}
	
	.services ul{
		padding: 0 0 20px;
		
		text-align: center;
	}	
	
		.services ul li{
			overflow: hidden;
			float: left;
			width: 20%;					
		}
		
		.services ul li:last-child{
			margin-right: 0;
		}
		
			.services .container_li{
				padding-right: 20px;
			}
		
				.services ul li .inner{
					background: #fff;
					min-height: 230px;
					overflow: hidden;
					-moz-box-shadow: 0 0 4px red;	
					-webkit-box-shadow: 0 0 4px red;	
					box-shadow: -1px 1px 2px #000;	
					margin-bottom: 12px;	
					padding: 10px;		
					position: relative;	
				}
			
					.services ul li .img_outer{
						padding-top: 34px;
						padding-bottom: 26px;	
						display: block;	
					}
				
						.services ul li img{

						}
						
						.services ul li .head{
							display: block;
							padding-bottom: 49px;
							
							font: 16px 'keep_calm_medium', arial, sans-serif;
							text-transform: uppercase;
						}
						
						.services ul li .read_more_outer{
							position: absolute;
							bottom: 19px;
							left: 0;
							width: 192px;
							height: 42px;
							overflow: hidden;
							display: block;
						}			
						
							.services ul li a{ 
								text-decoration: none;
								color:#e8410b; 
								font: 16px 'Greyscale', arial, sans-serif; 
								text-align:center; 
								text-transform: uppercase;
								
								-moz-border-radius: 5px;
								-webkit-border-radius: 5px;
								-khtml-border-radius: 5px;
								border-radius: 5px;				
								display:inline-block; 
								padding:12px 10px 11px; 
								margin:0 auto;
								cursor:...