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>

CSS

body{
  font-family: helvetica;
}

.user-form-assignments{
  width: 300px;
}
.user-form-assignments>h2{
  margin: 0px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #356DB0;
}
.user-form-assignments>ol{
  margin: 0px;
  padding: 0px;
}
.user-form-assignments>ol>li{
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 30px);
  border: solid 1px #399845;
  padding: 10px;
  margin: 4px;
  padding-bottom: 22px;
  position: relative;
}
.user-form-assignments>ol>li>h3{
  font-size: 14px;
  font-weight: bold;
  margin: 0px;
  color: #399845;
}
.user-form-assignments>ol>li>h3>img{
  height: 38px;
  float:right;
}
.user-form-assignments>ol>li>p{
  font-size: 11px;
  margin: 0px;
}
.user-form-assignments>ol>li>p>svg{
  height: 10px;
  margin-bottom: -1px;
  margin-right: 3px;
}
.user-form-assignments>ol>li>p.flow-session-id{

}
.user-form-assignments>ol>li>p.found-in{
  position: absolute;
    bottom: 7px;
    left: 10px;
    right: 10px;
    font-size: 9px;
}
.user-form-assignments>ol>li>p button{
  float: right;
  background-color: #399845;
  color: #fff;
  padding: 9px;
  width: 90px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  margin-top: 8px;
  line-height: 12px;
  margin-top: -10px;
}

JavaScript

class FormAssignments {

  constructor(parentElement){

    this.parentElement = parentElement;
    this.ui;

    this.build();

  }



  build(){

    this.ui = $(`<div class="user-form-assignments"><h2>Forms Assigned To Me</h2><ol><ol></div>`);

    this.parentElement.append(this.ui);

    // AJAX call replaces this static JSON

    let data = [
  {
    "service_name": "All-Safe",
    "scope_name": "Safety Form",
    "assigned_by": "Johnny Richael",
    "timestamp": "2025-10-27 16:28:45",
    "form_name": "Incident Management Form",
    "workflowBehaviorsSession": "1761600563679",
    "encrypted_workflowBehaviorsSession": "Y1lXTnRUbkpOVmxaYVpXdHdUMVpyV25OTk1WSldWV3hhVG1GNlJUSldNVkpQVlVaV1ZVMUVhejA9",
    "started": "0",
    "encrypted_id": "Y1lXTnRUbkpQVlZaYVpXeFZPUT09",
    "icon": "https://agrisphere-portal.com/clientPortal/assets/icon-library/form-traditional-2-purple.svg"
  },
  {
    "service_name": "agPROACTIVE",
    "scope_name": "Maintenance Forms",
    "assigned_by": "Self",
    "timestamp": "2025-10-27 16:18:20",
    "form_name": "HD Image Test",
    "workflowBehaviorsSession": "1761599971030",
    "encrypted_workflowBehaviorsSession": "Y1lXTnRUbkpOVmxaYVpXdHdUMVpyV2xaTlZsRjRWVzVLVGsxRVJsWlZWbWgzVkd4R1ZVMUVhejA9",
    "started": "0",
    "encrypted_id": "Y1lXTnRUbkpQVmxaYVpXc3dPUT09",
    "icon": "https://agrisphere-portal.com/clientPortal/assets/icon-library/form-traditional-1-orange.svg"
  }
];

    for(let i=0;i<data.length;i++){

      let foundIn = "<strong>FOUND IN:</strong><br />" + data[i].service_name + ' --> ' + data[i].scope_name;

      let assignment = $(`<li>
        <h3><img src="${data[i].icon}">${data[i].form_name}</h3>
        <p>Assigned By: <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round"...