JSFiddle - React, Tailwind, and code Playground

HTML

<div id="step1"></div>
<br />
<div id="step2"></div>
<br />
<div id="step3" style="width:100%;"></div>
<div id="content" style="width:100%;"></div>

CSS

.list_row {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 10px;
  font-family: Verdana;
  font-size: 90%;
  color: #000;
  text-align: left;
  clear: both;
}

.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  margin-bottom: 40px;
  font-family: Verdana;
  font-size: 80%;
  color: #000;
  text-align: left;
  float: left;
}
.rgb{
  width: 100px;
  height: 100px;
}

JavaScript

// Work with TEXTURE-LIST (SIMPLE) of the customer
var s_string = "http://surface.dawdigital.com/get_datalist_materials.php?cnf=hotel1&cols=article_nr;info;Mode;RGB_R;RGB_G;RGB_B&skeys=&svals=";
var demo_link = "http://surface.dawdigital.com/get_img_material.php?cnf=hotel1&w=100&h=100&mid=";

$(document).ready(function() {
  loadObjlist();
});

function loadObjlist() {
  // STEP1: Getting a complete TEXTURE-LIST of the customer in JSON-format ______________________________
  $.ajax({
    url: s_string,
    type: "GET",
    data: {},
    error: function() {
      $("#step1").html('ERROR');
    },
    success: function(data) {
      createSceneList(data);
    },
    dataType: "text"
  });
}

function createSceneList(data) {
  //$("#step2").html(data);
  var JSON_data, i, j, temp = '',
    list = '',
    id = '';

  // STEP2: Check and parse JSON-response
  JSON_data = JSON.parse(data);
  if (JSON_data.status == 1) {
    // STEP3: DEMO ___________________________________________________________________________________
    j = JSON_data.resultlist.length;
    for (i = 0; i < j; i++) {

      id = 'txtr_' + i;
      list = '<div id="' + id + '" class="element">';
      if (JSON_data.resultlist[i].Mode == 2)
      {
      list+= '<img src="' + demo_link + JSON_data.resultlist[i].id + '" />';
      }
      else
      {
       list+= '<div style="background:rgb('+JSON_data.resultlist[i].RGB_R+','+JSON_data.resultlist[i].RGB_G+','+JSON_data.resultlist[i].RGB_B+')" class="rgb"></div>';
      }
      list+='<br /><span class="sceneName" style="display:none;">' + JSON_data.resultlist[i].article_nr + '</span>' + '</div>';
      $("#content").append(list);

      $('#' + id).data({
        id: JSON_data.resultlist[i].id,
        iname: JSON_data.resultlist[i].article_nr,
        type: 'scene'
      });
    }
    $('.element').on('mouseover', function() {
      $(this).find('.sceneName').show();
    });
    $('.element').on('mouseout', function() {
     ...