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;" /></a>
      </div>
    </div>
    <div id="description">
      Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    </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);

	display: table;
	width: 100%;
    height: calc(100% - 150px);
}

#bigimage {
	display: table-row;
	width: 100%;
	height: 100%;
}

#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%;
}

#description {
    display: table-row;
    text-align: center;
}

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

#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:...