JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div class="container-fluid disply-table">
        <div class="row disply-table-row">
            <div class="col-md-2 disply-table-cell vlign-top" id="side-menu">
                <h1>Navigation</h1>
                <ul>
                    <li class="link">
                        <a href="#"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                        <span>Dashboard</span>
                        </a>
                    </li>
                </ul>
                </div>
                <div class="col-md-10 disply-table-cell vlign-top box">
                  <div class="row">

                           <header class="clearfix" id="nav-header">
                          <div class="col-md-5">
                              <input placeholder="Search for" type="text" id="header-search-field" />
                          </div>
                          <div class="col-md-7">
                              <ul class="pull-right">
                                  <li id="welcome">Welcome to you adminstration area</li>
                                 <li class="fixed-width">
                                     <a href="">
                                     <span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
                                     <span class="label label-warning">4</span>
                                     </a>
                                 </li>
                                  <li class="fixed-width">
                                      <a href="">
                                          <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                                          <span class="label label-messgae">32</span>
                                      </a>
                                  </li>
                                  <li>
                                      <a href="" class="logout">
                                          <span class="glyphicon...

CSS

html,body{
    font-family:"open sans",Arial, Helvetica, sans-serif;
    background-color:#f3f3f4;
    color:#676a6c;
    height:100%;
}

.container-fluid{
  width: 100%;
  padding: 0px !important;
}

#side-menu
{
    background-color:#2f4050;
    padding:0px;
}

.box{
    border:1px solid red;
}

#side-menu h1
{
    color:#1f3647;
    text-align:center;
    margin:10px 0px;
    font-size:25px;
}

.disply-table
{
    display:table;
    padding:0px;
    height:100%;
    width:100%;
}

.disply-table-row{

    display:table-row;
    height:100%;
}

.disply-table-cell{

    display:table-cell;
    float:none;
    height:100%;
} 

.vlign-top{
    vertical-align:top;

}

#nav-header{
    background-color:#fff;
    border-bottom:1px solid #e7eaec;
}

#nav-header #header-search-field
{
 padding-top:17px;
 vertical-align:central;
 border:none;
 width:300px; 
 outline:none;
}

#nav-header ul
{
    margin:0px;
    padding:0px;
    list-style:none;
    color:#676a6c;
}


#nav-header ul li{
    float:left;
    margin-left:15px;
    padding:17px 0px;
}


#nav-header ul .glyphicon{
  color:#676a6c;
}

.label-messgae{
    background-color:#1ab394;
}


#nav-header ul a
{
    text-decoration:none;
}


#nav-header .logout
{
    color:#676a6c;
}



#nav-header .logout:hover
{
    color:#676a6c;
}

#nav-header welcome{
margin-right:20px;
}

#nav-header ul .label
{
    position:absolute;
    margin-top:-10px;
    margin-left:-5px;
   
}

#nav-header .fixed-width{
    width:35px;
}


#admin-footer{
    position:absolute;
    width:100%;
    bottom:0px;
    background-color:#fff;
    padding:10px;
    font-size:12px;
    color:#676a6c;

}