JSFiddle - React, Tailwind, and code Playground

Bird & Bird Directory

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="directory-wrapper">
  <div id="directory-list" class="">
    <div class="directory-loading">
      <div class="directory-loading-screen"></div>
      <div class="directory-loading-body">
        <div class="loader-wrapper">
          <div class="loader"></div>
        </div>
        <p class="loading-text"></p>
      </div>
    </div>
    <form id="directory-search">
      <span class="fa fa-search"></span>
      <input id="search" type="search" placeholder="Search or Filter">
      <a href="#" class="btn btn-link" id="search-cancel">Cancel</a>
    </form>
    <div id="directory-filters">
      <div id="filters">
        <label>Type to search or select a filter</label>
        <h3>Filter by <span id="filter-selected"></span></h3>
        <div class="list-default" id="filter-list">
          <ul>
            <li class="linked data-linked" data-type="filter" data-filter="Company">
              <span class="icon fa fa-angle-right"></span>
              <div class="list-image" style="background-color: rgba(51,51,51,1)"></div>
              <div class="list-desc">
                <p class="list-title">Company</p>
              </div>
              <span class="buttonControl"></span>
            </li>

            <li class="linked data-linked" data-type="filter" data-filter="E-mail address">
              <span class="icon fa fa-angle-right"></span>
              <div class="list-image" style="background-color: rgba(51,51,51,1)"></div>
              <div class="list-desc">
                <p class="list-title">E-mail address</p>
              </div>
              <span class="buttonControl"></span>
            </li>
          </ul>
        </div>
        <div class="list-default" id="filter-value-list"></div>
      </div>
    </div>
    <div...

CSS

#data-directory,
#data-directory > .row,
#directory-details,
#directory-list {
  height: 100%;
}

.directory-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#directory-details {
  float: left;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

#directory-list .list-default,
.overlayPanel .list-default {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#directory-list ul,
.overlayPanel ul {
  padding: 0;
  margin: 0;
  font-size: 13px;
}

@media screen and (min-width: 640px) {
  #directory-list ul {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 200;
  }
}

#directory-list li,
.overlayPanel li {
  list-style: none;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  padding: 10px 10px 10px 0;
  position: relative;
}


/* NEW CSS FOR THUMBS */

#directory-list .list-default li.linked,
.overlayPanel .list-default li.linked {
  padding-right: 44px;
  cursor: pointer;
}


#directory-list .list-default.has-thumbs li.data-linked {
  padding-left: 62px;
}

@media screen and (min-width: 640px) {
  #directory-list .list-default.has-thumbs li.active {
    padding-left: 72px;
  }
}

.list-default.has-thumbs li .list-image {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -25px;
  background-position: center center;
  background-size: cover;
}

.list-default.has-thumbs.circular li .list-image {
  border-radius: 50%;
}

@media screen and (min-width: 640px) {
  .list-default.has-thumbs li.active .list-image {
    left: 10px;
  }
}

/* END OF NEW CSS */

#directory-list {
  padding: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  position: relative;
}

#directory-list .list-default ul > li .icon,
.overlayPanel .list-default ul > li .icon {
  display: none;
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  right: 0;
  margin-top: -22px;
  font-size: 28px;
  line-height: 44px;
  text-align:...