<main>
  <div class="container">
    <div class="jumbotron text-xs-center">
      <h1 class="h2 text-center">
        Custom Tab View
      </h1>
      <p class="lead">
        with hide and seek search.
      </p>
      <p><small>by <a href="http://petersekan.de">Peter Sekan</a></small></p>
    </div>

    <input class="form-control text-xs-center" type="search" data-toggle="hideseek" id="search" data-list=".stack" value="" placeholder="Search for name or file extension">

    <!-- Nav tabs -->
    <div class="center-wrapper center-block">
      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="nav-item">
          <a class="nav-link active" href="#list" aria-controls="list" role="tab" data-toggle="tab">
            <i class="fa fa-th-list fa-lg"></i>
          </a>
        </li>
        <li class="nav-item " role="presentation">
          <a class="nav-link" href="#grid" aria-controls="grid" role="tab" data-toggle="tab">
            <i class="fa fa-th-large fa-lg"></i>
          </a>
        </li>
      </ul>
    </div>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="list">
        <div class="table-responsive">
          <table id="file-list" class="table">
            <thead>
              <tr>
                <th>Filename</th>
                <th>Type</th>
                <th>Color</th>
              </tr>
            </thead>
            <tbody class="stack">
              <!-- generated content comes here -->
            </tbody>
          </table>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane" id="grid">
        <div id="file-grid" class="stack">
          <!-- generated content comes here -->
        </div>
      </div>
    </div>
  </div>
</main>

<footer class="text-xs-center">
  <small>Made with ❤︎ in</small>
  <h2 class="h6 ">Berlin</h2>
</footer>

<!-- underscore templates -->

<script id="list-item" type="text/html">
  <tr>
    <td class="list-item-title">
      <h4 class="h6 list-item-title <%= type %>">
        <%= name %>
      </h4>
    </td>
    <td class="list-item-size">
      <%= type %>
    </td>
    <td class="list-item-size">
      <%= color %>
    </td>
  </tr>
</script>

<script id="grid-item" type="text/html">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card">
      <img class="card-img" data-src="<%= img %>" src="<%= img %>" alt="Card image cap">
      <div class="card-img-overlay" style="background-image: url(<%= img %>)">
        <h4 class="h6 card-title text-xs-center <%= type %>">
          <%= name %>
        </h4>
        <p class="card-text text-xs-right">
          <%= type %>
        </p>
        <p class="card-text text-xs-right">
          <%= color %>
        </p>
      </div>
    </div>
  </div>
</script>
// variables

@text-color-dark: #333333;
@text-color-light: #fafafa;
@background-color-light: mediumturquoise;
@background-color-dark: lightseagreen;

// mixins

.placeholder-type() {
  text-align: center; 
  font-size: 1.2rem;
  font-family: 'Fairplay Display', serif;
  font-style: italic;
  letter-spacing: .02em; 
  color: @text-color-dark !important;
}

.before-icon( @icon:'\f15b', @size: 16px, @color: @text-color-light ) {
  color: @color;
  content: @icon;
  font-size: @size;
  font-family: "FontAwesome";
}

.grid-icon(@icon: '\f15b') {
  display: block;
  margin-bottom: 1rem;
  .before-icon(@icon, 5rem)
}

.list-icon(@icon: '\f15b') {
  display: inline-block;
  margin-right: 1rem;
  .before-icon(@icon, 1rem)
}

.type-sans( @color: currentColor ){
  color: @color;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .02em;
  font-style: normal;
}

.type-serif( @color: currentColor ){
  color: @color;
  font-family: 'Fairplay Display', serif;
  font-style: italic;
  letter-spacing: .02em
}

// styling

// typography genearal
input::-webkit-input-placeholder {
  .placeholder-type();
}
input:-webkit-input-placeholder {
  .placeholder-type();
}
input:-moz-placeholder {
  .placeholder-type();
}
input::-moz-placeholder {
  .placeholder-type();
}
input:-ms-input-placeholder {
  .placeholder-type();
}

.h2,
.h6,
.alert,
th {
  .type-sans();
}


body {
  color: @text-color-dark;
  background-color: @background-color-light;
  .type-serif();
}

main {
  padding: 1.5rem 0
}

// jumbotron styling

.jumbotron {
  background-color: transparent;
  border: solid 1px @background-color-dark;
}

small a {
  color: currentColor;
  border-bottom: solid 1px @text-color-light;
  padding: 0 .25rem;
  
    
  &:hover {
    text-decoration: none;
    color: @text-color-light;
    border-color: @text-color-dark;
  }
}

// search field 

input[type='search'] {
  .type-serif(@text-color-light);
  font-size: 1.5rem;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: solid 2px @text-color-light;
  
  &:focus {
    border-bottom: solid 1px @background-color-dark;    
  }
}

// tab navigation styling

.center-wrapper {
  overflow: hidden;
  width: 12em;
  padding: 2em;
}

.nav-pills .nav-link {
  color: @text-color-dark;
  background-color: transparent;
  &.active{
    background-color: transparent;
    box-shadow: inset 0 0 10px 0 @background-color-dark;
    color: @text-color-light;
    
  }
  &:hover {
    color: @text-color-light
  }
  &:hover,
  &:visited,
  &:focus {
    background-color: transparent;
    
    &.active {
      background-color: transparent; 
    }
  }
    
}

// grid view styling

.card {
  overflow: hidden;
  border: none;

  .card-img-overlay {
    background-color: @background-color-light;
    background-position: center;
    background-blend-mode: screen;
  }
  
  &:hover {
    .card-img-overlay {
      background-blend-mode: normal;
    }
  }
}

.card-title{
    &.pdf::before {
    .grid-icon('\f1c1');
  }
  &.xls::before {
    .grid-icon('\f1c3');
  }
  &.doc::before {    
    .grid-icon('\f1c2');
  }
  &.ppt::before {
    .grid-icon('\f1c4')    
  }
  &.png::before,
  &.jpg::before{
    .grid-icon('\f1c5');
  }
}

.card-text,
.list-item-size {
  .type-serif;
  margin: 0;
  // color: @text-color-light;
}

// list view styling

.list-item-title {
  &.pdf::before {
    .list-icon('\f1c1');
  }
  &.xls::before {
    .list-icon('\f1c3');
  }
  &.doc::before {    
    .list-icon('\f1c2');
  }
  &.ppt::before {
    .list-icon('\f1c4')    
  }
  &.png::before,
  &.jpg::before{
    .list-icon('\f1c5');
  }
}

.table td,
.table th,
.table thead th {
  border-bottom: 1px solid @background-color-dark;
}

.table th {
  .type-serif(@background-color-dark);
  border-top: none;
}

footer {
  background-color: @background-color-dark;
  color: @text-color-dark;
  padding: 1em 0;
  margin: 0;
  
  .h6 {
    color: @text-color-light;
  }
}
View Compiled 
/* global _, console */

(function ($) {
  var $listContainer = $("#file-list tbody");
  var $gridContainer = $("#file-grid");
  var myData = [
    {
      id: "59ac7d23060f759da72061f6",
      index: 0,
      price: "160.87",
      color: "blue",
      name: "do officia",
      img: "https://unsplash.it/g/300?image=500",
      createdAt: "Wednesday, May 27, 2015 4:13 PM",
      type: "hat"
    },
    {
      id: "59ac7d2343b763386fd61e85",
      index: 1,
      price: "1,941.70",
      color: "brown",
      name: "et elit",
      img: "https://unsplash.it/g/300?image=501",
      createdAt: "Thursday, July 13, 2017 12:04 PM",
      type: "sweater"
    },
    {
      id: "59ac7d239f7cd47ffbc1a3a9",
      index: 2,
      price: "1,928.84",
      color: "brown",
      name: "exercitation reprehenderit",
      img: "https://unsplash.it/g/300?image=502",
      createdAt: "Saturday, May 31, 2014 10:46 AM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d23581de567de943c42",
      index: 3,
      price: "1,558.17",
      color: "green",
      name: "officia commodo",
      img: "https://unsplash.it/g/300?image=503",
      createdAt: "Monday, October 17, 2016 8:39 PM",
      type: "t-shirt"
    },
    {
      id: "59ac7d23d4958f9aa9d216ac",
      index: 4,
      price: "1,138.14",
      color: "blue",
      name: "anim laborum",
      img: "https://unsplash.it/g/300?image=504",
      createdAt: "Friday, June 23, 2017 10:29 PM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d239c563e0c152b5f2d",
      index: 5,
      price: "1,096.80",
      color: "brown",
      name: "ut magna",
      img: "https://unsplash.it/g/300?image=505",
      createdAt: "Wednesday, February 25, 2015 2:50 AM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d234db887437031b310",
      index: 6,
      price: "601.91",
      color: "blue",
      name: "eiusmod est",
      img: "https://unsplash.it/g/300?image=506",
      createdAt: "Thursday, November 20, 2014 5:30 AM",
      type: "sweater"
    },
    {
      id: "59ac7d23e2e446cdd3efb097",
      index: 7,
      price: "1,662.40",
      color: "green",
      name: "esse elit",
      img: "https://unsplash.it/g/300?image=507",
      createdAt: "Thursday, August 14, 2014 5:49 PM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d23d9763b04a9845eb5",
      index: 8,
      price: "688.22",
      color: "brown",
      name: "esse laboris",
      img: "https://unsplash.it/g/300?image=508",
      createdAt: "Tuesday, December 16, 2014 8:32 PM",
      type: "pants"
    },
    {
      id: "59ac7d231ae3c42988951389",
      index: 9,
      price: "125.89",
      color: "blue",
      name: "laboris voluptate",
      img: "https://unsplash.it/g/300?image=509",
      createdAt: "Saturday, October 25, 2014 1:33 PM",
      type: "pants"
    },
    {
      id: "59ac7d232e01d30d7d59b30f",
      index: 10,
      price: "1,878.20",
      color: "brown",
      name: "ipsum duis",
      img: "https://unsplash.it/g/300?image=510",
      createdAt: "Tuesday, October 25, 2016 9:25 AM",
      type: "v-neck"
    },
    {
      id: "59ac7d23885cf4fc498c9d01",
      index: 11,
      price: "1,386.39",
      color: "brown",
      name: "deserunt aute",
      img: "https://unsplash.it/g/300?image=511",
      createdAt: "Friday, December 11, 2015 7:40 PM",
      type: "hat"
    },
    {
      id: "59ac7d23289736c73a2d255f",
      index: 12,
      price: "1,116.08",
      color: "brown",
      name: "voluptate do",
      img: "https://unsplash.it/g/300?image=512",
      createdAt: "Sunday, March 20, 2016 4:29 AM",
      type: "v-neck"
    },
    {
      id: "59ac7d239ce7a129c2c60ffb",
      index: 13,
      price: "1,469.82",
      color: "brown",
      name: "sit proident",
      img: "https://unsplash.it/g/300?image=513",
      createdAt: "Friday, January 29, 2016 12:16 PM",
      type: "v-neck"
    },
    {
      id: "59ac7d23a68bd1d87ad1110a",
      index: 14,
      price: "383.85",
      color: "blue",
      name: "velit sunt",
      img: "https://unsplash.it/g/300?image=514",
      createdAt: "Friday, September 16, 2016 3:53 AM",
      type: "v-neck"
    },
    {
      id: "59ac7d23943c2a0958f9899e",
      index: 15,
      price: "194.55",
      color: "green",
      name: "in est",
      img: "https://unsplash.it/g/300?image=515",
      createdAt: "Thursday, February 18, 2016 2:22 AM",
      type: "hat"
    },
    {
      id: "59ac7d235152ac162b509405",
      index: 16,
      price: "679.94",
      color: "brown",
      name: "Lorem consectetur",
      img: "https://unsplash.it/g/300?image=516",
      createdAt: "Thursday, October 8, 2015 3:44 AM",
      type: "long sleeve"
    },
    {
      id: "59ac7d23fa30b5a7cf424e3c",
      index: 17,
      price: "1,071.35",
      color: "green",
      name: "occaecat aliquip",
      img: "https://unsplash.it/g/300?image=517",
      createdAt: "Saturday, February 8, 2014 5:09 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d236099a522a7bfd33f",
      index: 18,
      price: "179.39",
      color: "brown",
      name: "elit tempor",
      img: "https://unsplash.it/g/300?image=518",
      createdAt: "Monday, February 10, 2014 7:47 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d2343d77305fe86312d",
      index: 19,
      price: "784.30",
      color: "green",
      name: "exercitation sunt",
      img: "https://unsplash.it/g/300?image=519",
      createdAt: "Friday, March 17, 2017 5:11 PM",
      type: "hat"
    },
    {
      id: "59ac7d2380b63bb031c1a8bb",
      index: 20,
      price: "582.30",
      color: "blue",
      name: "laborum consectetur",
      img: "https://unsplash.it/g/300?image=520",
      createdAt: "Sunday, July 6, 2014 3:17 PM",
      type: "pants"
    },
    {
      id: "59ac7d2363c3b3b4bae7572f",
      index: 21,
      price: "1,105.16",
      color: "blue",
      name: "esse ut",
      img: "https://unsplash.it/g/300?image=521",
      createdAt: "Tuesday, August 9, 2016 7:16 AM",
      type: "pants"
    },
    {
      id: "59ac7d2327e9c46eac4d1a4c",
      index: 22,
      price: "1,492.76",
      color: "brown",
      name: "consequat reprehenderit",
      img: "https://unsplash.it/g/300?image=522",
      createdAt: "Tuesday, January 24, 2017 5:13 PM",
      type: "hat"
    },
    {
      id: "59ac7d232c9913d09223a753",
      index: 23,
      price: "1,807.47",
      color: "blue",
      name: "adipisicing eiusmod",
      img: "https://unsplash.it/g/300?image=523",
      createdAt: "Friday, February 5, 2016 9:57 AM",
      type: "footwear"
    },
    {
      id: "59ac7d2301136e09e2807b4b",
      index: 24,
      price: "329.91",
      color: "brown",
      name: "qui deserunt",
      img: "https://unsplash.it/g/300?image=524",
      createdAt: "Wednesday, May 21, 2014 3:48 PM",
      type: "sweater"
    },
    {
      id: "59ac7d2316a056e7db5e2d92",
      index: 25,
      price: "435.57",
      color: "green",
      name: "ea culpa",
      img: "https://unsplash.it/g/300?image=525",
      createdAt: "Monday, September 26, 2016 5:01 PM",
      type: "t-shirt"
    },
    {
      id: "59ac7d23fee673c4c06f0aa3",
      index: 26,
      price: "1,048.40",
      color: "green",
      name: "aute esse",
      img: "https://unsplash.it/g/300?image=526",
      createdAt: "Monday, May 29, 2017 11:44 AM",
      type: "pants"
    },
    {
      id: "59ac7d230484001b079643e8",
      index: 27,
      price: "630.82",
      color: "green",
      name: "nulla laborum",
      img: "https://unsplash.it/g/300?image=527",
      createdAt: "Wednesday, May 3, 2017 7:43 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d23b315340a6f4ad7df",
      index: 28,
      price: "1,357.52",
      color: "brown",
      name: "ex velit",
      img: "https://unsplash.it/g/300?image=528",
      createdAt: "Wednesday, May 31, 2017 2:43 AM",
      type: "sweater"
    },
    {
      id: "59ac7d23f141c9cf2919e28f",
      index: 29,
      price: "1,608.68",
      color: "green",
      name: "occaecat sunt",
      img: "https://unsplash.it/g/300?image=529",
      createdAt: "Thursday, May 22, 2014 12:47 PM",
      type: "hat"
    },
    {
      id: "59ac7d230c558b048d088e2c",
      index: 30,
      price: "843.13",
      color: "blue",
      name: "tempor eiusmod",
      img: "https://unsplash.it/g/300?image=530",
      createdAt: "Monday, March 24, 2014 10:26 PM",
      type: "sweater"
    },
    {
      id: "59ac7d23ef2469e57a2cae40",
      index: 31,
      price: "1,344.56",
      color: "blue",
      name: "cillum quis",
      img: "https://unsplash.it/g/300?image=531",
      createdAt: "Monday, February 9, 2015 8:31 AM",
      type: "pants"
    },
    {
      id: "59ac7d238e42e3c7164dec1a",
      index: 32,
      price: "1,910.99",
      color: "green",
      name: "esse est",
      img: "https://unsplash.it/g/300?image=532",
      createdAt: "Wednesday, June 24, 2015 4:35 PM",
      type: "t-shirt"
    },
    {
      id: "59ac7d232c3ca69dda1963e3",
      index: 33,
      price: "1,590.14",
      color: "brown",
      name: "est et",
      img: "https://unsplash.it/g/300?image=533",
      createdAt: "Wednesday, August 24, 2016 5:37 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d233d803bcd7fc6650e",
      index: 34,
      price: "1,924.52",
      color: "green",
      name: "enim incididunt",
      img: "https://unsplash.it/g/300?image=534",
      createdAt: "Wednesday, January 21, 2015 4:05 AM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d235b26d1cc90dba37f",
      index: 35,
      price: "1,396.50",
      color: "brown",
      name: "ut pariatur",
      img: "https://unsplash.it/g/300?image=535",
      createdAt: "Thursday, October 8, 2015 8:00 PM",
      type: "sweater"
    },
    {
      id: "59ac7d238b4c82cb143c21a6",
      index: 36,
      price: "185.32",
      color: "blue",
      name: "qui exercitation",
      img: "https://unsplash.it/g/300?image=536",
      createdAt: "Thursday, January 16, 2014 8:46 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d231272e3e3b0f2850d",
      index: 37,
      price: "1,609.78",
      color: "green",
      name: "eiusmod incididunt",
      img: "https://unsplash.it/g/300?image=537",
      createdAt: "Tuesday, December 16, 2014 9:24 AM",
      type: "v-neck"
    },
    {
      id: "59ac7d23393cbd7d35f53c7c",
      index: 38,
      price: "186.29",
      color: "green",
      name: "non cillum",
      img: "https://unsplash.it/g/300?image=538",
      createdAt: "Thursday, June 25, 2015 3:41 AM",
      type: "pants"
    },
    {
      id: "59ac7d2358ab17f7a232f1e6",
      index: 39,
      price: "1,494.47",
      color: "green",
      name: "culpa exercitation",
      img: "https://unsplash.it/g/300?image=539",
      createdAt: "Thursday, December 11, 2014 3:03 AM",
      type: "t-shirt"
    },
    {
      id: "59ac7d23004b00545509473d",
      index: 40,
      price: "929.66",
      color: "green",
      name: "sit non",
      img: "https://unsplash.it/g/300?image=540",
      createdAt: "Friday, February 14, 2014 2:49 AM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d234d7b8d503fadb195",
      index: 41,
      price: "464.47",
      color: "green",
      name: "eu aute",
      img: "https://unsplash.it/g/300?image=541",
      createdAt: "Monday, September 5, 2016 9:02 AM",
      type: "footwear"
    },
    {
      id: "59ac7d23b979997130058f2b",
      index: 42,
      price: "1,582.00",
      color: "green",
      name: "excepteur adipisicing",
      img: "https://unsplash.it/g/300?image=542",
      createdAt: "Wednesday, August 30, 2017 6:32 PM",
      type: "hat"
    },
    {
      id: "59ac7d23bea71a5975f8fca5",
      index: 43,
      price: "1,765.63",
      color: "green",
      name: "in magna",
      img: "https://unsplash.it/g/300?image=543",
      createdAt: "Monday, July 17, 2017 5:38 PM",
      type: "cocktail dress"
    },
    {
      id: "59ac7d23eafcd858060217c9",
      index: 44,
      price: "1,152.71",
      color: "green",
      name: "irure quis",
      img: "https://unsplash.it/g/300?image=544",
      createdAt: "Wednesday, October 21, 2015 2:33 PM",
      type: "sweater"
    },
    {
      id: "59ac7d23cdf22533d3b5f947",
      index: 45,
      price: "1,021.05",
      color: "green",
      name: "occaecat ex",
      img: "https://unsplash.it/g/300?image=545",
      createdAt: "Sunday, July 3, 2016 7:59 AM",
      type: "hat"
    },
    {
      id: "59ac7d238064b0c87bb4ec11",
      index: 46,
      price: "577.77",
      color: "brown",
      name: "incididunt ex",
      img: "https://unsplash.it/g/300?image=546",
      createdAt: "Wednesday, April 6, 2016 1:36 AM",
      type: "hat"
    },
    {
      id: "59ac7d2398cf22ac8b8cec6a",
      index: 47,
      price: "591.88",
      color: "blue",
      name: "duis esse",
      img: "https://unsplash.it/g/300?image=547",
      createdAt: "Sunday, August 30, 2015 9:18 PM",
      type: "long sleeve"
    },
    {
      id: "59ac7d2317e2bd6375bff58e",
      index: 48,
      price: "216.76",
      color: "green",
      name: "labore ea",
      img: "https://unsplash.it/g/300?image=548",
      createdAt: "Saturday, August 27, 2016 3:23 PM",
      type: "footwear"
    },
    {
      id: "59ac7d23c1e0840367c233ee",
      index: 49,
      price: "579.75",
      color: "green",
      name: "labore in",
      img: "https://unsplash.it/g/300?image=549",
      createdAt: "Monday, January 12, 2015 4:18 PM",
      type: "hat"
    }
  ];

  function displayFiles() {
    var listItems = [],
      gridItems = [];
    $.each(myData, function (index) {
      // console.log(myData[index]);
      var currentListItem = _.template($("#list-item").html());
      var currentGridItem = _.template($("#grid-item").html());

      listItems.push(currentListItem(myData[index]));
      gridItems.push(currentGridItem(myData[index]));
    });

    $listContainer.append(listItems.join(""));
    $gridContainer.append(gridItems.join(""));
    // $listContainer.hide();
  }
  // code
  function init() {
    displayFiles();
    $("#search").hideseek();
    $(".nav-link").on("click", function(){
      $(".nav-link").toggleClass("active");
      $(".tab-pane").toggleClass("active");
      console.log("yay");
    });
  }

  init();
})(jQuery);
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css
  3. https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display:400italic" rel="stylesheet

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/hideseek/0.8.0/jquery.hideseek.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js