JSFiddle - React, Tailwind, and code Playground

by riazxrazor

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="list-inline list-photo">
</ul>

CSS

<style type="text/css">
 
    ul,
    ol {
      margin-top: 0;
      margin-bottom: 10px;
    }

    ul ul,
    ul ol,
    ol ul,
    ol ol {
      margin-bottom: 0;
    }

    .list-unstyled {
      padding-left: 0;
      list-style: none;
    }

    .list-inline {
      padding-left: 0;
      list-style: none;
      margin-left: -5px;
    }

    .list-inline > li {
      display: inline-block;
      padding-left: 5px;
      padding-right: 5px;
    }

    .thumbnail {
      display: block;
      padding: 4px;
      margin-bottom: 20px;
      line-height: 1.428571429;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      -webkit-transition: border 0.2s ease-in-out;
      transition: border 0.2s ease-in-out;
    }

    .thumbnail > img,
    .thumbnail a > img {
      display: block;
      max-width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
    }

    .thumbnail .caption {
      padding: 9px;
      color: #333333;
    }

    a.thumbnail:hover,
    a.thumbnail:focus,
    a.thumbnail.active {
      border-color: #333333;
    }

    ul.list-photo > li > a.thumbnail-upload:hover, ul.list-photo > li > a.thumbnail-upload:focus, ul.list-photo > li > a.thumbnail-upload:active {
      border-color: #337ab7;
      color: #337ab7;
    }

    ul.list-photo > li > .thumbnail {
      display: table-cell;
      width: 120px;
      height: 120px;
      text-align: center;
      vertical-align: middle;
      position: relative;
    }

    ul.list-photo > li > .thumbnail > a.thumbnail-check {
      top: 0;
      right: 5px;
      position: absolute;
    }

    ul.list-photo > li > .thumbnail > a.thumbnail-check:hover {
      color: #5cb85c;
    }

    ul.list-photo > li > .thumbnail.thumbnail-main {
      background-color: #dff0d8;
      border: 1px solid #5cb85c;
    }

    ul.list-photo > li > .thumbnail.thumbnail-main > a.thumbnail-check {
      color: #5cb85c;
    }

    ul.list-photo > li > .thumbnail >...

JavaScript

var photoList = [{id:"1", name:"hazard.jpg"}, {id:"3", name:"ronaldo.jpg"}, {id:"5", name:"messi.jpg"}];
      var res = "";
var list = Array(5);
for(var i = 0; i < photoList.length; i++) {
  var p = photoList[i];
  list[p.id-1] = p; 
}

for(var i = 0; i < list.length; i++) {
var p = list[i];
          if(p) {
              res +=  `<li id="thumbnail-view-`+i+`">
                              <div class="thumbnail">
                                  <img src="/img/products/thumbs/`+p.name+`" alt="">                          
                                  <ul class="list-inline list-edit">
                                      <li>
                                          <a href="#" class="text-danger" id="delete-image-`+i+`"
                                             data-toggle="modal"
                                             data-target="#modal-delete-image-`+i+`"
                                             data-photo='${JSON.stringify(photoList)}'                                  
                                          >
                                              <span class="fa fa-trash"></span>
                                          </a>
                                  
                                      </li>
                                  </ul>
                              </div>
                          </li>`;
                  
          }
          else {
              res += `<li id="thumbnail-upload-`+i+`">
                          <a href="#" class="thumbnail thumbnail-upload" id="add-image-`+i+`"
                             title="Add photo"
                             data-toggle="modal"
                             data-target="#modal-add-image-`+i+`"
                          >
                              <span class="fa fa-plus fa-2x"></span>
                          </a>
                      </li>`;
          }
      }
$('ul.list-photo').html(res);