JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="content">
  <div class="lhs">
    <div class="header">
      <tit>Content Library</tit>
      <foot>
        <span class="glyphicon glyphicon-folder-plus"></span>
        <span class="glyphicon glyphicon-refresh"></span>
        <span class="glyphicon glyphicon-bin"></span>
        <span class="glyphicon glyphicon-group"></span>
        <span class="glyphicon glyphicon-question-sign"></span>
      </foot>
    </div>
  </div>
  <div class="main">
    <div class="header">
      <div class="header-lhs">
        <ul>
          <li><span class="glyphicon glyphicon-file"></span>Create</li>
          <li><span class="glyphicon glyphicon-edit"></span>Edit</li>
          <li><span class="
            glyphicon glyphicon-trash"></span>Delete</li>
          <li><span class="glyphicon glyphicon-list-alt"></span>Properties</li>
          <li><span class="glyphicon glyphicon-open"></span>Submit</li>
          <li><span class="glyphicon glyphicon-check"></span>Unlock</li>
        </ul>
      </div>
      <div class="header-rhs">
        <div class="times">
          <span class="glyphicon glyphicon-refresh"></span>
          <span class="glyphicon glyphicon-time"></span>
        </div>
        <div class="view">
          <span class="glyphicon glyphicon-align-justify"></span>
          <span class="glyphicon glyphicon-th-large active"></span>
        </div>
        <div class="name">
          <span class="glyphicon glyphicon-sort-by-alphabet"></span>
          <span class="sort"> Name
          <span class="glyphicon glyphicon-chevron-down"></span>
          </span>
        </div>
        <div class="search">Search all content <span class="glyphicon glyphicon-search"></span></div>
        <div class="help"><span class="glyphicon glyphicon-question-sign"></span></div>
      </div>

    </div>
    <div class="filters">
      <div class="tag">Clear Search</div>
      <div class="tag">Latest Version = "True" <span class="glyphicon glyphicon-remove-sign"></span></div>
...

CSS

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
 * {
   margin: 0;
   font-family: Segoe UI;
   font-size: 14px;
 }

 .content {
   display: flex;
   width: 100vw;
 }

 .lhs {
   width: calc(25% - 1px);
   max-width: 350px;
   min-width: 250px;
   float: left;
   border-right: 1px solid #ccc;
   height: 100vh;
   background: #f4f4f4;
 }

 .main {
   width: 100%;
   float: left;
   height: 100vh;
 }

 .header {
   height: 40px;
   overflow: hidden;
 }

 .lhs .header {
   background: #3291d6;
   color: #fff;
   max-height: 40px;
   width: 100%;
 }

 .main .header {
   background: #006bba;
   width: 100%;
 }

 .main .filters {
   background: #ededed;
   height: 40px;
 }

 tit {
   display: block;
   margin: 11px 15px;
 }

 .header-lhs {
   float: left;
   color: #fff;
 }

 .header-rhs {
   float: right;
   color: #fff;
   display: flex;
 }

 .header-lhs ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .header-lhs li {
   float: left;
   padding: 10px;
 }

 .header-rhs .search {
   background: #3291d6;
   width: 200px;
   padding: 11px;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   float: left;
 }

 .header-lhs .glyphicon {
   padding-right: 5px;
   top: 0;
 }

 .header-rhs .search span {
   float: right;
   padding-top: 2px;
 }

 .header-rhs .name {
   background: #006bba;
   width: 140px;
   padding-top: 11px;
   border-left: 1px solid #fff;
 }

 .times .glyphicon {
   padding: 14px;
   top: 0;
 }

 .times .glyphicon:last-child {
   margin-right: 4px;
 }

 .name .glyphicon {
   padding: 14px 14px;
   height: 40px;
   margin-top: -11px;
   margin-right: 5px;
   top: 0;
 }

 .name .glyphicon-chevron-down {
   float: right;
   font-size: 6px !important;
   padding-top: 18px;
 }

 .help .glyphicon {
   padding: 14px;
   top: 0;
 }

 .header .glyphicon {
   font-size: 12px;
 }

 .view span {
   padding: 14px;
   background: #006bba;
   top: 0;
   height: 40px;
   width: 40px;
   margin-left: -4px;
 }

...