JSFiddle - React, Tailwind, and code Playground

Image Manager - Interface

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="widget-interface">
  <header>
    <p>Configure your image</p>
    <a href="#">Need help?</a>
  </header>
  <div id="image-drop-zone">
    <input type="file" name="files[]" id="image_file" multiple />
    <label for="image_file">
      <p>Drag &amp; drop your images here or</p>
      <div class="btn btn-primary">Click to upload</div>
    </label>
  </div>
  <div class="form-group search-media">
    <span class="fa fa-search"></span>
    <input type="text" class="form-control" id="search-media" name="search-media" placeholder="Search my images and Fliplet Library">
  </div>
  <header class="titles">
    <p>My images</p>
  </header>
  <div class="image-library">
    <div class="col-xs-4">
      <div class="image-holder" style="background-image: url('https://hd.unsplash.com/photo-1470158499416-75be9aa0c4db');">
        <div class="image-overlay">
          <div class="btn btn-primary">Use</div>
          <!--<div class="btn btn-default">Quick view</div>-->
        </div>
        <div class="image-info">
          <p>
            <strong>imagename.jpg</strong>
          </p>
          <p>
            Dimension: 1280x720
            <br> Size: 640KB
            <br> Uploaded by Hugo
            <br> 04 Aug 2016
          </p>
        </div>
      </div>
      <div class="image-title">
        <p>
          <strong>imagename.jpg</strong>
        </p>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="image-holder" style="background-image: url('https://hd.unsplash.com/photo-1470215645605-f2afbb72eedb');">
        <div class="image-overlay">
          <div class="btn btn-primary">Use</div>
          <!--<div class="btn btn-default">Quick...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background: #f2f6f7;
}


/*BUTTONS*/

.btn {
  border-radius: 6px;
  line-height: 44px;
  padding: 0px 15px;
  border: none;
}

.btn-default {
  color: #333;
  background-color: #e4e9eb;
  border-bottom: 2px solid #cfd3d5;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover {
  color: #333;
  background-color: #cfd3d5;
  border-color: #cfd3d5;
  outline: none;
}

.btn-primary {
  color: #FFF;
  background-color: #00abd2;
  border-bottom: 2px solid #0087a6;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:hover,
.btn-primary:active:hover {
  color: #FFF;
  background-color: #0087a6;
  border-color: #0087a6;
  outline: none;
}

.btn-link,
a {
  color: #00abd2;
}

header {
  display: flex;
  font-size: 0.8em;
  border-bottom: 1px solid #E3E9EB;
  margin-bottom: 3rem;
  padding-bottom: 1.5em;
}

header.titles {
  font-weight: bold;
}

header p {
  flex: 1;
  margin: 0 1.4rem 0 0;
}

header a {
  text-decoration: none;
}

#image-drop-zone {
  position: relative;
}

#image-drop-zone input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#image-drop-zone label {
  width: 100%;
  border: 1px dashed #0087a6;
  background-color: rgba(217, 221, 222, 0.5);
  padding: 20px;
  text-align: center;
  color: #14505e;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.25s ease;
}

#image-drop-zone.hover label {
  background-color: rgba(217, 221, 222, 1);
}

#image-drop-zone p {
  font-size: 1em;
  display: inline-block;
  margin-right: 10px;
}

.form-control {
  border-radius: 6px;
  border: 1px solid #e4e9eb;
  color: #333;
  height: 44px;
  line-height: 44px;
  padding: 0px 15px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control:focus...

JavaScript

/* SOURCE OF THIS CODE
https://github.com/remy/html5demos/blob/master/demos/dnd-upload.html */
var holder = document.getElementById('image-drop-zone');

/* THIS MIGHT HAVE TO BE TWEAKED */
function readfiles() {
	console.log("UPLOAD");
}

holder.ondragover = function() {
  this.className = 'hover';
  return false;
};
holder.ondragleave = function() {
  this.className = '';
  return false;
};
holder.ondragend = function() {
  this.className = '';
  return false;
};
holder.ondrop = function(e) {
  this.className = '';
  e.preventDefault();
  readfiles();
}