JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="audit-item-tiles"></ul>

CSS

body{
  font-family: helvetica;
}

ul.audit-item-tiles{
		max-width: 500px;
    list-style: none;
    margin:0px;
    padding:0px;
	}
  
	ul.audit-item-tiles>li{
		padding: 10px;
		border: solid 1px #436cab;
    border-radius: 5px;
    font-size: 15px;
    margin-bottom: 10px;
	}
  
  ul.audit-item-tiles .align-left{
		text-align: left;
	}
  
  ul.audit-item-tiles .align-center{
		text-align: center;
	}
  
  ul.audit-item-tiles .align-right{
		text-align: right;
	}
	
	
	ul.audit-item-tiles>li>table th{
		font-size: 10px;
    font-weight: bold;
	}
  
  ul.audit-item-tiles>li>table th.one-third{
		width: 33.33%;
	}
	
	ul.audit-item-tiles>li>table td{
		font-size: 12px;
    color: #333;
    vertical-align: top;
    line-height:12px;
	}
  
 ul.audit-item-tiles .compliance-status{
   text-align: center;
   width: 150px;
   padding: 10px;
   display: block;
   margin:auto;
   border-radius:10px;
   border:solid 2px #000;
   margin-bottom: 10px;
 }
 ul.audit-item-tiles .level{
   text-align: center;
   width: 100px;
   padding: 5px;
   display: block;
   margin:auto;
   border-radius:5px;
   border:solid 1px #000;
   margin-left: 0px;
   margin-bottom: 10px;
 }
 ul.audit-item-tiles .status{
   text-align: center;
   width: 100px;
   padding: 5px;
   display: block;
   margin:auto;
   border-radius:5px;
   border:solid 1px #000;
   margin-right: 0px;
   margin-bottom: 10px;
 }
 
 ul.audit-item-tiles  .audit-image-list{
   position: relative;
   width: 235px;
   height: 110px;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 20px;
 }
  ul.audit-item-tiles  .audit-image-list ul{
   display: inline-block;
   position: absolute;
   left: 35px;
   right: 35px;
   top: 0px;
   bottom: 0px;
   background-color: #f5f5f5;
   list-style: none;
   margin: 0px;
   padding: 0px;
   height: 104px;
   text-align: center;
   overflow: hidden;
   border: solid 2px #eee;
   border-radius: 5px;
 }
 ul.audit-item-tiles  .audit-image-list ul>li{
   display: inline-block;
   text-align:...

JavaScript

var jsonData =[{"0":"2024-01-29","1":"Michael Prosser","2":"0","3":"0000-00-00 00:00:00","4":"","5":"1","6":"2024-02-05 09:38:10","7":"13191","8":"26","9":"34","10":"3","11":"1","12":"2","13":" Level 2","14":"13191","15":"6d703ee8-2d5f-49a3-b080-84585e54e82a","16":"Mattoon","17":"Open","18":"#356db0","19":"#c7d9f0","20":"0","21":"1","22":"Compliant","23":"#c3fb9d","24":"#5c6a4d","25":"1","26":"#fa891e","27":"#ffffff","28":"Electrical - damage","29":"Highest Priority (7 Day Resolution)","30":"Site A","31":"Nam luctus, neque eget rhoncus iaculis, dolor lorem condimentum magna, quis auctor tortor lectus vitae elit. Nulla ultricies ligula eget quam iaculis, in vulputate purus suscipit. Sed vel condimentum purus. Sed condimentum risus ut suscipit fermentum. Praesent tempor diam at eleifend ullamcorper. Nunc et dolor sed ligula suscipit vehicula. Morbi nec neque vitae est suscipit interdum ac at nisl. Donec cursus ex quis convallis tempor.","32":"Nam luctus, neque eget rhoncus iaculis, dolor lorem condimentum magna, quis auctor tortor lectus vitae elit. Nulla ultricies ligula eget quam iaculis, in vulputate purus suscipit. Sed vel condimentum purus. Sed condimentum risus ut suscipit fermentum. Praesent tempor diam at eleifend ullamcorper. Nunc et dolor sed ligula suscipit vehicula. Morbi nec neque vitae est suscipit interdum ac at nisl. Donec cursus ex quis convallis tempor.","33":"2024-01-29 15:41:03","34":"1","35":"1","audit_date":"2024-01-29","audit_creator":"Michael Prosser","resolved":"0","resolved_timestamp":"0000-00-00 00:00:00","standards":"","modified_by":"1","last_updated":"2024-02-05 09:38:10","item_id":"13191","type":"26","system":"34","facility":"3","status":"1","priority":"2","audit_priority":" Level...