JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<footer class="footer">
			<div class="row">
				<div class="col-lg-2 col-md-3 col-sm-3 footer-Darkerblue">
					<p class="footer-ul footer-text-align">
						<span class="footer-headtext text-uppercase">destination</span><br/>
						<span class="footer-Kilomet">6.8 Kms </span>
						<span class="footer-min">25 Min away</span>
					</p>

				</div>
				<div class="clearfix visible-sm-block visible-md-block"></div>
				<div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkenblue">
					<ul class="footer-ul footerstatus-text-align">
						<li class="footer-headtext text-uppercase">
							Status
						</li>
						<li class="footer-min-text">
							In Transit
						</li>						
					</ul>
				</div>
				
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-4">
					<div class="dotted">
						<ul class="footer-ul footer-direction-text">
							<li>
								<i class="fa fa-circle-o direction-icon-circle"></i>
									<div class="footer-map-text">Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue,
									North End, Silhurst, Loamshire, SH15 6BP</div>
							</li>
							<li class="footer-li-pad">
								<i class="fa fa-map-marker direction-icon"></i>
									<div class="footer-map-text">As Directed</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="clearfix visible-sm visible-md"></div>
				<div class="col-lg-2 col-xs-2 footer-left-border">
					<ul class="footer-ul">
						<li>
							DATE
						</li>
					</ul>
					<ul class="footer-ul list-inline footer-text-date">
						<li>
							<em class="fa fa-calendar"></em> 25 Dec, 2015
						</li>
						<li>
							<em class="fa fa-clock-o"></em> 16:30
						</li>
					</ul>
				</div>
				<div class="clearfix visible-sm visible-md"></div>
				<div class="col-lg-2 ...

CSS

/*footer css starts here for track page*/
ul{
  list-style-type: none;
}
ul li .footer-map-text{
   display: inline-block;
}
.row > div{
   border-right: 1px solid #fff;
}
.footer {
  background-color: #012359;
  z-index: 20;
  height: 18%;
  position: fixed;
  width: 100%;
  bottom: 100px;
  color: white;
  font-family: 'Droid Sans';
  font-weight: 400;
}
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin-left: -4px;
}
.vheight{
    line-height: 18%;
}