JSFiddle - React, Tailwind, and code Playground

by mariob316

HTML

<div id="allHolder">
<article class="sensorHolder ui-draggable" id="sensor_1" data-top="105" data-left="546" style="position: relative; left: 546px; top: 106px; "><span class="circleBase type1">1</span><ul class="sensorVal">
    <li id="sp_101_30.1.101_34" data-show="true" data-showtable="true" data-address="101_30.1.101_34" data-unit="mm/s" data-status="Alert" style="display: block; ">A - 0.071351923mm/s</li>
    <li id="sp_101_30.1.101_35" data-show="true" data-showtable="true" data-address="101_30.1.101_35" data-unit="mm/s" data-status="Error" style="display: block; ">B - 0.0830135121mm/s</li>
    <li id="sp_101_30.1.101_45" data-show="false" data-showtable="true" data-address="101_30.1.101_45" data-unit="mm/s" data-status="Warning" style="display: none; ">C - 0.0830135121mm/s</li>
    <li id="sp_101_42.2.101_43" data-show="true" data-showtable="true" data-address="101_42.2.101_43" data-unit="mm/s" data-status="Alert" style="display: block; ">D - 0.0125087006mm/s</li></ul></article>

<article class="sensorHolder ui-draggable" id="sensor_2" data-top="105" data-left="546" style="position: relative; left: 546px; top: 106px; "><span class="circleBase type1">1</span><ul class="sensorVal">
    <li id="sp_102_30.1.101_34" data-show="true" data-showtable="true" data-address="101_30.1.101_34" data-unit="mm/s" data-status="Ok" style="display: block; ">A - 0.071351923mm/s</li>
   </ul></article>

<article class="sensorHolder ui-draggable" id="sensor_3" data-top="105" data-left="546" style="position: relative; left: 546px; top: 106px; "><span class="circleBase type1">1</span><ul class="sensorVal">
    <li id="sp_103_30.1.101_34" data-show="true" data-showtable="true" data-address="101_30.1.101_34" data-unit="mm/s" data-status="Ok" style="display: block; ">A - 0.071351923mm/s</li>
    <li id="sp_103_30.1.101_35" data-show="true" data-showtable="true" data-address="101_30.1.101_35" data-unit="mm/s" data-status="Error" style="display: block; ">B - 0.0830135121mm/s</li>
   ...

CSS

.sensorHolder{float:left;width:200px;margin:10px 20px}
.sen_Location_1{text-align:left;width:100%;outline:thin solid black}
.sensorHolder ul{width:100%;}
.sensorHolder ul li{width:98%; margin:7px auto;height:20px;}
.sensorHolder ul li .senLetter{width:20px;display:inline-block !important;text-align:center;height:20px !important;}

.sensorHolder ul li p{display:inline-block;vertical-align:middle;}

.sensorError{border:thin solid rgb(182,182,182)}
.sensorError .senLetter{background-color:rgb(182,182,182)}
.sensorAlert{border:thin solid red}
.sensorAlert .senLetter{background-color:red !important;}
.sensorWarning{border:thin solid rgb(255,115,0)}
.sensorWarning .senLetter{background-color:rgb(255,115,0)}
.sensorOk{border:thin solid rgb(0,160,251);}
.sensorOk .senLetter{background-color:rgb(0,160,251);}

article{display:none;}

#previewList{background-color:rgb(100,100,100)}
nav a{text-decoration:none;color:white;margin-right:10px;}
.currentSelected{border:thin solid black;background-color:rgb(136,136,136)}

.content img {float:left;margin-left:-30px;position:relative;top:-5px;left:5px;}

JavaScript

var data = {
    "d": [{
        "machineTrainId": 61,
        "machineId": 1,
        "sensorswithparameters": [{
            "sensorId": 161,
            "locationName": "spt1",
            "top": 66,
            "lleft": -853,
            "sensorparameters": [{
                "parameterId": 308,
                "parameterName": "par1",
                "diaplayInImage": true,
                "displayInTable": true,
                "address": "101_30.1.101_34",
                "units": "mm/s",
                "sensorId": 161},
            {
                "parameterId": 309,
                "parameterName": "par2",
                "diaplayInImage": true,
                "displayInTable": true,
                "address": "101_30.1.101_35",
                "units": "mm/s",
                "sensorId": 161},
            {
                "parameterId": 310,
                "parameterName": "par3",
                "diaplayInImage": true,
                "displayInTable": true,
                "address": "101_30.1.101_45",
                "units": "mm/s",
                "sensorId": 161},
            {
                "parameterId": 311,
                "parameterName": "par4",
                "diaplayInImage": false,
                "displayInTable": true,
                "address": "101_42.2.101_43",
                "units": "mm/s",
                "sensorId": 161}]},
        {
            "sensorId": 162,
            "locationName": "spt2",
            "top": 45,
            "lleft": 165,
            "sensorparameters": [{
                "parameterId": 312,
                "parameterName": "par1",
                "diaplayInImage": true,
                "displayInTable": true,
                "address": "102_17.3.102_38",
                "units": "mm/s",
                "sensorId": 162},
            {
                "parameterId": 313,
                "parameterName": "par2",
                "diaplayInImage": false,
                "displayInTable": true,
      ...