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="flow-sessions-holder"></ul>

CSS

body{
  font-family: helvetica;
}

.flow-sessions-holder{
  position: relative;
}
.flow-sessions-holder>h2{
  text-align: center;
  font-size: 17px;
}
.flow-sessions-holder .vault-result{
  
}
.flow-sessions-holder {
    font-family: helvetica;
    list-style: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    position: relative;
}
.flow-sessions-holder>li {
    background-color: rgb(241 241 241);
    padding: 15px;
    border-bottom: 6px solid #fff;
}
.flow-sessions-holder .vault-result h1{
  position: relative !important;
    perspective: 100px !important;
    perspective-origin: 30px 30px !important;
    font-size: 18px !important;
    line-height: 44px !important;
    margin-left: -10px !important;
    text-transform: uppercase !important;
    margin-top: 0px !important;
    min-height: initial !important;
    padding: 0px !important;
    border: none !important;
    box-shadow: none !important;
    max-width: initial;
    padding-left: 47px !important;
}
.flow-sessions-holder .vault-result h3{
  font-size: 13px;
    font-weight: normal;
    margin: 0px;
    margin-bottom: 10px;
    text-align: left;
    line-height: 12px;
}
.flow-sessions-holder .vault-result>h1>img {
    height: 38px;
    width: auto;
    vertical-align: middle;
    z-index: 3;
    position: absolute;
    left: 8px;
    top: 4px;
    transform: rotateY(30deg) translateZ(0px);
}

.flow-sessions-holder .vault-result>h1>img.shadow1 {
    z-index: 2;
    transform: rotateY(25deg) translateX(0px) translateZ(-5px);
    filter: brightness(0.33);
    opacity: 0.6;
}

.flow-sessions-holder .vault-result>h1>img.shadow2 {
    z-index: 1;
    transform: rotateY(20deg) translateX(0px) translateZ(-5px);
    filter: brightness(0.66);
    opacity: 0.3;
}
.last-record-table {
    width: 100%;
    margin: 3px;
}
.last-record-table td.session-data {
    background-color: transparent !important;
   ...

JavaScript

class VaultFlowSessions {
	
	constructor(parentElement,flowSession){
		
		this.parentElement = parentElement;
    this.flowSession = flowSession;
		
		this.build();
		
	}
	
	build(){

    let data = [{"form_id":"977","encrypted_id":"Y1lXTnRUbkpQVmxaYVpXc3dPUT09","is_chain":false,"session_id":"","assigned_to":"Michael Prosser","assigned_by":"Michael Prosser","assigned":true,"started":true,"completed":true,"trigger_form":false,"form_name":"HD Image Test","behavior":"single-submission","icon":"https:\/\/agrisphere-portal.com\/clientPortal\/assets\/icon-library\/form-traditional-1-orange.svg","sessions":[{"0":"59803","submission_id":"59803","1":"0","form_iteration":"0","2":"2025-11-04 16:43:55","timestamp":"2025-11-04 16:43:55","3":"1","user_id":"1","4":"1000008","facility_id":"1000008","5":"[]","loto_procedures_used":"[]","6":"0","session_closed":"0","7":"","form_icon":"","8":"[{   \"component_enabled\": 0,   \"component_mapto\": \"\",   \"attachments_enabled\": 0,   \"attachments_required\": 0,   \"signatures_required\": 0,   \"signatures\": [],   \"fields\": [] }]","loto_integration_configuration":"[{   \"component_enabled\": 0,   \"component_mapto\": \"\",   \"attachments_enabled\": 0,   \"attachments_required\": 0,   \"signatures_required\": 0,   \"signatures\": [],   \"fields\": [] }]","9":"new-window","form_openbehavior":"new-window","10":"[[{\"ui\":\"component\",\"options\":{\"live\":true,\"type\":\"image\",\"data\":{\"GUID\":\"52ed4e51-a5ae-4fa1-a8f2-916d7caacaa7\",\"photo1\":\"\",\"photo2\":\"\",\"photo3\":\"\"},\"parent\":{\"jQuery183046699844836007753\":760},\"mapto\":\"photo1\",\"pseudomapto\":\"\",\"label\":\"Upload...