JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.csss"></script>
<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-4 col-md-3 col-sm-3 col-xs-12" id="distance_panel">
      <div class="row equal">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-6 footer-Darkerblue col-height foter-text-Center">
          <div class=" footer-ul footer-text-align">
            <div class="col-lg-12">
              <div class="col-lg-6 col-sm-6 col-xs-6 col-height">
                <div class="footer-headtext text-uppercase footer-left">distance</div>
                <div class="footer-Kilomet">6.8
                  <p class="footer-kilo-sm">miles</p>
                </div>
              </div>
              <div class="col-lg-6 col-sm-6 col-xs-6  footer_li_time">
                <div class="footer-headtext text-uppercase">time</div>
                <div class="footer-min">25
                  <p class="footer-min-sm">minutes</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12 col-xs-6 footer-Darkenblue col-height foter-text-Center">
          <ul class="footer-ul footerstatus-text-align ">
            <li class="footer-headtext-statu text-uppercase">
              Status
            </li>
            <li class="footer-min-text">
              On the way
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-lg-8 col-md-9 col-sm-9 col-xs-12" id="showmobilecont">
      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 padding-reset">
        <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.,...

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

#map {
  height: 93%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 65px;
  z-index: 0;
  margin: 0;
  padding: 0;
}

.footer_copy {
  margin-left: 40px;
  margin-top: 20px;
  font-family: Droid Sans;
  font-size: 14px;
  color: #666
}

.footer_ul {
  list-style-type: none;
  display: inline-block;
  padding-left: 15px;
  margin-top: 15px;
}

.footer_ul_line {
  padding-left: 15px !important;
}

.footer_ul:first-child {
  padding-left: 0px;
}


/*login page css ends here*/

.labels {
  color: red;
  background-color: white;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 120px;
  border: 0px solid black;
  white-space: nowrap;
}

.labels_marker {
  color: red;
  font-size: 16px;
  font-weight: bold;
  width: 50px;
  text-align: center;
}

.labels_marker_to {
  color: red;
  font-size: 14px;
  font-weight: bold;
  width: 60px;
  text-align: center;
}


/*footer css starts here for track page*/

.footer-min-text {
  margin-top: 5px;
  font-size: 16px;
}

.footer {
  background-color: #012359;
  z-index: 20;
  position: absolute;
  width: 100%;
  bottom: 0px;
  color: white;
  font-family: 'Droid Sans';
  font-weight: 400;
}

.showmorelink {
  display: none;
}

.footer_li_time {
  left: 30px;
}

.distance {
  margin-left: -58px;
}

.equal,
.equal > div[class*='col-'] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 1 0 auto;
}

.footer-left-border {
  border-left: 1px solid #153466;
  margin-top: 15px;
  height: 85px;
}

.footer-Darkerblue {
  background-color: #00112c;
}

.footer-Darkenblue {
  background-color: #011c47;
}

.footer-headtext {
  color: #6cafff;
  font-size: 14px;
}

.footer-valheadtext {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}

.footer-Kilomet {
  font-size: 34px;
  font-family: Droid sans;
  display:...