JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

    <!-- The Team -->
					<div class="home-doctors  clearfix">

					    <div class="container">
					        <div class="row">
				                <div class="col-lg-12 col-md-12 col-sm-12 ">
				                    <div class="slogan-section animated fadeInUp clearfix ae-animation-fadeInUp">
				                        <h2>Meet our <span>Dental Specialists</span></h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>                    </div>
				                </div>
					    	</div>


					        
					        <div class="row">



<!-- entry1 -->
						            <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
				                        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">

					                        <ul class="list-inline social-lists animate">
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-skype"></i></a></li>
												<li><a href="#"><i class="fa fa-twitter"></i></a></li>
												<li><a href="#"><i class="fa fa-facebook"></i></a></li>
											</ul>

	                                        <figure>
								                    <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> 
								            </figure>

						                    <div class="text-content">
						                        <h5>Dr. Jeremy</h5>
						                        <!-- <div class="for-border"></div>...

CSS

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);



.animate {
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/*=============== Home-team ===============*/

.home-doctors {
  text-align: center;
  padding: 70px 0 80px;
  background: #f0f5f6;
}

.home-doctors h2 {
    font-weight: normal;
}

.home-doctors .common-doctor {
  background-color: #fff;
}
.home-doctors .common-doctor figure {
  overflow: hidden;
  width: 100%;
	height: 196px;
}

.home-doctors img {
	width: 100%;
	height: auto;
	margin-top: -6em;
}

.home-doctors .common-doctor h5 {
  margin: 0 0 7px;
  font-size: 18px;
	font-weight: 700;
	color: #3a3c41;
}
.home-doctors .common-doctor .for-border {
  margin-bottom: 20px;
}
.home-doctors .common-doctor .text-content {
  padding: 19px 14px 13px;
}
.home-doctors.doctors-var-two {
  text-align: left;
  background-color: #fff;
}
.home-doctors.doctors-var-two .slogan-section {
  text-align: left;
}
.home-doctors.doctors-var-two .common-doctor {
  background-color: transparent;
}
.home-doctors.doctors-var-two .common-doctor .for-border {
  display: none;
}
.home-doctors.doctors-var-two .common-doctor .text-content {
  padding: 20px 0 20px;
}
.home-doctors.doctors-var-two .text-center {
  text-align: left;
}

.slogan-section {
	margin-bottom: 50px;
	text-align: center;
}

.home-doctors .common-doctor .for-border {
	margin-bottom: 20px;
}

.for-border {
	height: 11px;
	width: 100%;
	background: transparent url(http://omarhabash.com/nova/wp-content/uploads/2014/08/feature-border.png) center center no-repeat;
	border: none;
}

.home-doctors .common-doctor h5 small {
	color: #008fd5;
	font-weight: bold;
	font-size: 0.8em;
	font-style: italic;
}

.home-doctors .common-doctor ul{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -28px;
	text-align:...