JSFiddle - React, Tailwind, and code Playground

by tiwariliferocks

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrap">
         <!-- Fixed navbar -->
         <div id="header-top">
            <div class="main">
               <div class="cont-top">
                  <ul>
                  </ul>
                  <p>
                     Fono Client Name 999999999 - Provincias 9092323902
                  </p>
               </div>
            </div>
         </div>
         <div class="navbar navbar-default navbar-fixed-top navbar-fixed-top-prima prima-header">
            <div class="container-fluid">
               <div class="navbar-header">
                  <img src="app/images/fondo_cabecera.gif" alt="" style="height:50px">        
                  <a class="navbar-brand" href="#">My Applicatin Name</a>
               </div>
                               <ul class="nav navbar-nav navbar-right user-details">
                    <li class="dropdown user-name">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                       <span class="glyphicon glyphicon-user"></span>
                       <strong>User Name</strong>
                       <span class="glyphicon glyphicon-chevron-down"></span>
                       </a>
                       <ul class="dropdown-menu">
                          <li>
                             <div class="navbar-login">
                                <div class="row">
                                   <div class="col-lg-4">
                                      <p class="text-center">
                                         <span class="glyphicon glyphicon-user icon-size"></span>
                                      </p>
                                   </div>
                                   <div class="col-lg-8"...

CSS

body {
  overflow-x: hidden;
  font-family: c_regular;
}
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -82px 0;
  /* Pad bottom by footer height */
  padding: 0 0 40px 0;
}
/* Set the fixed height of the footer here */
#footer {
  height: 40px;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  width: 100%;
}
#wrap .center-container {
  padding: 75px 0 0 0;
  margin: 0;
}
#footer .container {
  padding-top: 5px;
  padding-left: 15px;
  padding-right: 15px;
}
.center-container {
  height: 100%;
  display: inline-flex;
  width: 100%;
  margin: 0;
}
.center-row {
  height: 100%;
  width: 100%;
  display: table-row;
}
.prima-menu-fixed {
  position: fixed;
  left: 0;
  background-color: #FF4C01;
  min-height: 100%;
  padding: 0;
}
.prima-content {
  margin-left: 16.67%;
  padding-bottom: 40px;
}
.navbar-fixed-top-prima {
  top: 24px;
}
.navbar-login {
  width: 305px;
  padding: 10px;
  padding-bottom: 0px;
}
.navbar-login-session {
  padding: 10px;
  padding-bottom: 0px;
  padding-top: 0px;
}
.icon-size {
  font-size: 87px;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
.container-fluid.main-container {
  padding-left: 0;
}
#header-top {
  background-color: #FFF;
  width: 100%;
  height: 24px;
  display: table;
  position: fixed;
  top: 0;
  z-index: 1300;
}
#header-top .main {
  height: 24px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
  display: table;
  vertical-align: top;
}
#header-top .main .cont-top {
  width: 100%;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  float: right;
}
#header-top .main .cont-top ul {
  font-size: 12px;
  letter-spacing: -0.015em;
  text-decoration: none;
  margin-right: 0px;
  display: inline;
  list-style-type: none;
}
#header-top...