JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
  <div id="image_panel">
    <div id="bigimage">
      <div id="image_big">
        <a><img src="http://www.photoshow-gallery.com/demo/inc/img.png" style="opacity:0;" height="100%" width="100%" /></a>
      </div>
    </div>
    <div id="image_bar">
      <span id="prev">
        <a>
          <i id="chevron"></i>
        </a>
      </span>
    </div>
  </div>
  <div id="linear_panel">
    <div class="section">
      <div class="pure-g">
        <div class="item-g">
          <a class="linkthumb"><img src="http://www.photoshow-gallery.com/demo/?t=Thb&f=Australia%2FAustralia1.jpg" /></a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html {
    font-size: 100%;
}

body {
    color: #000;
font-family: "Roboto-Regular",sans-serif;
}

#page {
    position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
overflow-x: hidden;
overflow-y: auto;
}

#image_panel {
    background: #000 none repeat scroll 0% 0%;
color: #FFF;
position: absolute;
top: 0px;
bottom: 150px;
left: 0px;
right: 0px;
z-index: 10;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
}

#bigimage {
    position: absolute;
top: 0px;
right: 0px;
bottom: 35px;
left: 0px;
}

#image_big {
  background: #000 url("http://www.photoshow-gallery.com/demo/?t=Img&f=Australia%2FAustralia1.jpg") no-repeat scroll center center / contain;
  height: 100%;
}

#image_bar {
    position: absolute;
left: 0px;
right: 0px;
height: 30px;
bottom: 0px;
font-size: 15px;
text-align: center;
}

#prev {
    display: inline-block;
    width: 50px;
}

#chevron {
    color: #FFF;
    display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
    font-size: 1.33333em;
line-height: 0.75em;
vertical-align: -15%;
}

#chevron::before {
    content: "<";
}

#linear_panel {
        position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 130px;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 10;
}

.section {
    clear: both;
}

.pure-g {
    letter-spacing: -0.31em;
text-rendering: optimizespeed;
font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
    display: inline-block;
    overflow: hidden;
}

.item-g {
    display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
    border-color: #0088E8;
    width: 100px !important;
height: 100px;
}

.linkthumb {
    opacity: 1;
    width: 100%;
height: 100%;
transition: opacity 0.2s ease-in-out 0s;
}

.item-g img {
        vertical-align: middle;
    width: 100%;
}