JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<form method="post" action="mootools-upload.php" enctype="multipart/form-data" id="uploadForm">
<div>
  <div class="formRow">
    <label for="file" class="floated">File: </label>
    <input type="file" id="file" name="file[]" multiple><br>
  </div>

  <div class="formRow">
    <input type="submit" name="upload" value="Upload">
  </div>
</div>
</form>

CSS

.droppable {
  border: #ccc 1px solid;
  border-radius: 8px;
  background: #eee;
  color: #666;
  padding: 20px;
  margin: 10px;
  clear: both;
  text-align: center;
}

.droppable.hover {
  background: #ddd;
}

.uploadList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uploadItem {
  overflow: hidden;
  border-bottom: #BCBCBC 1px solid;
  margin: 0 20px;
  padding: 3px;
}

.uploadItem span {
  overflow: hidden;
  width: 150px;
  float: left;
  display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
  display: inline-block;
  background: url(add.png) no-repeat;
  height: 16px;
  width: 16px;
  text-indent: -999px;
}

.uploadItem a {
  float: left;
  display: block;
  padding-left: 20px;
  background-image: url(delete.png);
}

a.delInputRow {
  background-image: url(delete.png);
}

.progress {
  margin: 5px 0;
  height: 15px;
  border-radius: 3px;
  background: #545A74;
}

JavaScript

.droppable {
  border: #ccc 1px solid;
  border-radius: 8px;
  background: #eee;
  color: #666;
  padding: 20px;
  margin: 10px;
  clear: both;
  text-align: center;
}

.droppable.hover {
  background: #ddd;
}

.uploadList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uploadItem {
  overflow: hidden;
  border-bottom: #BCBCBC 1px solid;
  margin: 0 20px;
  padding: 3px;
}

.uploadItem span {
  overflow: hidden;
  width: 150px;
  float: left;
  display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
  display: inline-block;
  background: url(add.png) no-repeat;
  height: 16px;
  width: 16px;
  text-indent: -999px;
}

.uploadItem a {
  float: left;
  display: block;
  padding-left: 20px;
  background-image: url(delete.png);
}

a.delInputRow {
  background-image: url(delete.png);
}

.progress {
  margin: 5px 0;
  height: 15px;
  border-radius: 3px;
  background: #545A74;
}