JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<footer class="footer">
  <div class="row">
    <div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-6 footer-Darkerblue foter-text-Center">
        <div class="row footer-ul footer-text-align">
          <div class="col-lg-12">
            <div class="col-lg-6 col-sm-6 col-xs-6">
              <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">
              <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 foter-text-Center">
        <ul class="footer-ul footerstatus-text-align ">
          <li class="footer-headtext-statu text-uppercase">
            Status
          </li>
          <li class="footer-min-text">
            In Transit
          </li>
        </ul>
      </div>
    </div>
    <div class="col-lg-8 col-md-9 col-sm-9 col-xs-12 " id="showmobilecont">
      <div class="footer-add">
        <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., Flat B, 39 Acacia Avenue,...

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

.col-centered {
  float: none;
  margin: 0 auto;
  z-index: 10;
  background-color: #f9f9f9;
  margin-top: 5%;
  height: 120px;
  width: 100%;
  border-radius: 8px;
  position: fixed;
  margin-left: 200px;
}

.row .location-bar {
  margin: 0px;
  padding: 0px;
}

.text-label {
  font-family: 'Droid Sans';
  font-weight: bold;
  font-size: 14px;
  color: #666666;
  margin-left: 20px;
  margin-top: 20px;
  font-style: normal;
  font-variant: normal;
}

.text-label1 {
  font-family: 'Droid Sans';
  font-weight: normal;
  font-size: 14px;
  color: #666666;
  margin-left: 0px;
  margin-top: 20px;
  font-style: normal;
  font-variant: normal;
}

.location-bar .text-label1 {
  margin-left: 20px;
}

.search-input1 {
  border: 1px solid #919191;
  height: 50px;
  margin-top: 0px;
  margin-left: 0px;
  padding: 0px;
  border-radius: 5px;
  background-color: white;
  text-align: center;
}

.search-input4 {
  height: 65px;
  margin-top: 30px;
  margin-left: 0px;
  padding: 0px;
  border-radius: 5px;
  text-align: center;
}

.estimated-div {
  margin-top: 30px;
  margin-left: 0px;
  padding: 0px;
  float: left;
  width: 29%;
  height: 65px;
  border: 1px solid #919191;
  background-color: white;
}

.arrival-time {
  margin: 30px 5% 0 5%;
}

.input-div {
  margin: 0px;
  padding: 0px;
}

.search-input {
  text-indent: 40px;
  border: 1px solid #919191;
  height: 50px;
  width: 94%;
  margin-top: 0px;
  margin-left: 20px;
  border-radius: 5px;
  position: relative;
}

.add-image {
  background: url('../Styles/images/ic_search.png') no-repeat;
  width: 21px;
  height: 22px;
  position: absolute;
  z-index: 1;
  left: 30px;
  top: 60px;
}

.close-image {
  background: url('../Styles/images/ic_cancel.png') no-repeat;
  width: 21px;
  height: 22px;
  z-index: 1;
  right: 30px;
 ...

JavaScript

$(document).on('click', '.showmorelink', function() {
  $('#showmobilecont').toggle();
  $('#showmobilecont').addClass('showmobilecont');
  if ($("#showmobilecont").is(":hidden")) {
    $(".showmorelink").html('<i id="iconChange" class="fa fa-chevron-up"></i> <br/> Show More');
  } else {
    $(".showmorelink").html('<i id="iconChange" class="fa fa-chevron-down"></i> <br/> Close');
  }
});