JSFiddle - React, Tailwind, and code Playground

by Shaun Ellis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="filemanager">
  <div class="content">
    <div class="img_gallery ui-sortable" id="sortable">
      <div id="0" class="thumbnail"><img class="thumb" id="https://hydra-dev.princeton.edu/concern/ephemera_folders/feddf9b7-0935-448a-91d6-eb3ce933bcb5/manifest/canvas/s1544br12w" src="https://libimages1.princeton.edu/loris/plum/s1%2F54%2F4b%2Fr1%2F2w-intermediate_file.jp2/full/!600,600/0/default.jpg">
        <div class="caption">1</div>
      </div>
      <div id="1" class="thumbnail" style=""><img class="thumb" id="https://hydra-dev.princeton.edu/concern/ephemera_folders/feddf9b7-0935-448a-91d6-eb3ce933bcb5/manifest/canvas/sfx719p80h" src="https://libimages1.princeton.edu/loris/plum/sf%2Fx7%2F19%2Fp8%2F0h-intermediate_file.jp2/full/!600,600/0/default.jpg">
        <div class="caption">2</div>
      </div>
      <div id="2" class="thumbnail"><img class="thumb" id="https://hydra-dev.princeton.edu/concern/ephemera_folders/feddf9b7-0935-448a-91d6-eb3ce933bcb5/manifest/canvas/sx633f3144" src="https://libimages1.princeton.edu/loris/plum/sx%2F63%2F3f%2F31%2F44-intermediate_file.jp2/full/!600,600/0/default.jpg">
        <div class="caption">3</div>
      </div>
      <div id="3" class="thumbnail"><img class="thumb" id="https://hydra-dev.princeton.edu/concern/ephemera_folders/feddf9b7-0935-448a-91d6-eb3ce933bcb5/manifest/canvas/s8910jw684" src="https://libimages1.princeton.edu/loris/plum/s8%2F91%2F0j%2Fw6%2F84-intermediate_file.jp2/full/!600,600/0/default.jpg">
        <div class="caption">4</div>
      </div>
      <div id="4" class="thumbnail selected" style=""><img class="thumb" id="https://hydra-dev.princeton.edu/concern/ephemera_folders/feddf9b7-0935-448a-91d6-eb3ce933bcb5/manifest/canvas/sqn59q6091" src="https://libimages1.princeton.edu/loris/plum/sq%2Fn5%2F9q%2F60%2F91-intermediate_file.jp2/full/!600,600/0/default.jpg">
        <div class="caption">5</div>
    ...

CSS

body {
  padding-top: 50px;
}

.thumbnail {
  display: inline-block;
  max-width: 200px;
  margin: 10px;
}

.actions {
  padding: 0 30px 0 30px;
  height: 100%;
  overflow-y: auto;
}

.img_gallery {
  overflow: auto;
  height: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 30px;
}

#detail {
  height: 100%;
  padding: 15px;
}

#detail img {
  height: 100%;
}


/* start presentation styles */

.layout {
  position: relative;
  height: 85vh;
  width: 100vw;
}

#filemanager {
  position: relative;
  height: 85vh;
  width: 98vw;
}

.formPanel {
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 25%;
  width: 60%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#singleSelected {
  display: none;
}

#multiSelected {
  display: none;
}

.controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 25%;
  width: 38.5%;
}

.content {
  position: absolute;
  top: 20px;
  left: 0;
  height: 70%;
  width: 60%;
  border-radius: 4px;
}

.sidebar {
  position: absolute;
  top: 20px;
  right: 10px;
  height: 70%;
  width: 38.5%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.selected {
  border: 2px solid #9ecaed;
  box-shadow: 0 0 10px #9ecaed;
}

.hasChanged {
  background-color: Tomato
}

#orderChangedIcon {
  display: none;
}

.caption {
  pointer-events: none;
}

.thumb {
  pointer-events: none;
}