JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<h1 class="ag-boxed-header"><span>AG App</span> App Manager Name</h1>
<table class="ag-list-view-table">
  <tbody>
    <tr>
      <th class="ascending">User</th>
      <th class="ascending">Course</th>
      <th class="descending">Completed</th>
      <th class="ascending">Progress</th>
      <th class="ascending">Performance</th>
      <th class="ascending">Options</th>
    </tr>
    <tr>
      <td>Michael Prosser</td>
      <td>AGP-200 How to Create Preventive Maintenance Schedule</td>
      <td class="incomplete">NO</td>
      <td class="centered">88%</td>
      <td class="centered">96%</td>
      <td class="centered options"><button class="edit"><span>&#9998;</span> Edit</button><button class="delete"><span>X</span> Remove</button></td>
    </tr>
    <tr>
      <td>Dan Laderoute</td>
      <td>AGP-201 Work Orders</td>
      <td class="complete">YES</td>
      <td class="centered">100%</td>
      <td class="centered">94%</td>
      <td class="centered options"><button class="edit"><span>&#9998;</span> Edit</button><button class="delete"><span>X</span> Remove</button></td>
    </tr>
    <tr>
      <td>Frqank Byers</td>
      <td>AGT-0001 Standard Good Manufacturing Practices</td>
      <td class="complete">YES</td>
      <td class="centered">100%</td>
      <td class="centered">97%</td>
      <td class="centered options"><button class="edit"><span>&#9998;</span> Edit</button><button class="delete"><span>X</span> Remove</button></td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>ALS-001 Facility Safety Rules</td>
      <td class="complete">YES</td>
      <td class="centered">100%</td>
      <td class="centered">99%</td>
      <td class="centered options"><button class="edit"><span>&#9998;</span> Edit</button><button class="delete"><span>X</span> Remove</button></td>
    </tr>
    <tr>
      <td>Sam I Am</td>
      <td>ALS-002 Emergency Action Plans</td>
      <td class="complete">YES</td>
      <td class="centered">100%</td>
      <td...

CSS

/* google fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');

/*

some standard styling for the page so it is white with 100 height

*/

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0px;
}

/* 

end page standard styling 

*/

:root {
  /* colors */
  --ag-blue: #356DB0;
  --ag-dark-blue: #124077;
  --ag-green: #009f38;
  --ag-black: #000;
  --ag-warning: tomato;
  --ag-white: #ffffff;
  --ag-light-gray: #ccc;
  --ag-medium-gray: #999;
  
  /* fonts */
  --ag-data-font: helvetica, serif;
  --ag-header-font: 'Roboto', sans-serif;
  
}

/* start agrisphere standardized styles */

/* header styles */

h1.ag-boxed-header{
    position: relative;
    padding: 9px;
    border: solid 1px #666;
    box-shadow: 1px 5px 4px rgb(0 0 0 / 41%);
    margin-left: 50px;
    line-height: 24px;
    font-size: 24px;
    min-height: 20px;
    font-weight: 300;
    max-width: 1400px;
    font-family: var(--ag-header-font);
    color: var(--ag-green);
    text-transform: uppercase;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 20px;
    word-wrap: break-word;
}
h1.ag-boxed-header>span{
  color: var(--ag-black);
  text-transform: none;
}
h1.ag-boxed-header:before {
    content: "";
    display: block;
    background-image: url(https://agrisphere-portal.com/live/images/dashmenu/icon-library.png);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: -50px;
    width: 44px;
    height: 44px;
    top: 0px;
}

/* data table styles */

table.ag-list-view-table {
  background-color: var(--ag-light-gray);
  width: 100%;
  max-width: 1400px;
  margin: auto;
  font-family: var(--ag-data-font);
  border-spacing: 1px;
  border-collapse: separate;
}
table.ag-list-view-table>tbody {
  
}
table.ag-list-view-table>tbody>tr {
  
}
table.ag-list-view-table>tbody>tr>th {
  background-color: var(--ag-blue);
 ...