JSFiddle - React, Tailwind, and code Playground

by Jaime Alexander MĂ©ndez Medina

HTML

<!-- 
  by @jam65st | @testandfails
-->
<table class="stripped fixed"
				       type="table"
				       mode="dark"
				       source="A great data provide">
  <caption><strong>Invoice 77463</strong> ANY Supermarket &amp; Associates LLC</caption>
  <colgroup>
    <col span="1" class="cant">
    <col span="2" class="description fix">
    <col span="4" class="value">
    <col span="2" class="tax">
    <col span="1" class="summ">
  </colgroup>
  <thead>
    <tr>
      <th>Cant</th>
      <th>Detail</th>
      <th>Unit</th>
      <th>Gross value</th>
      <th>Discount</th>
      <th>Net value</th>
      <th>Current</th>
      <th>Tax</th>
      <th>Tax value</th>
      <th>Summa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td cant="5"></td>
      <td>Sugar Bag</td>
      <td align="center">Kg</td>
      <td preunit="$" value="1.75"></td>
      <td percent="25"></td>
      <td preunit="$" value="1.3125"></td>
      <td preunit="$" value="6.5625"></td>
      <td percent="5"></td>
      <td preunit="USD" value="0.3281"></td>
      <td preunit="USD" value="6.8806"></td>
    </tr>
    <tr>
      <td cant="5"></td>
      <td>Sugar Bag</td>
      <td align="center">Kg</td>
      <td value="1.75"></td>
      <td percent="25"></td>
      <td value="1.3125"></td>
      <td value="6.5625"></td>
      <td percent="5"></td>
      <td value="0.3281"></td>
      <td value="6.8806"></td>
    </tr>
    <tr>
      <td cant="5"></td>
      <td>Sugar Bag</td>
      <td align="center">Kg</td>
      <td value="1.75"></td>
      <td percent="25"></td>
      <td value="1.3125"></td>
      <td value="6.5625"></td>
      <td percent="5"></td>
      <td value="0.3281"></td>
      <td value="6.8806"></td>
    </tr>
    <tr>
      <td cant="5"></td>
      <td>Sugar Bag</td>
      <td align="center">Kg</td>
      <td value="1.75"></td>
      <td percent="25"></td>
      <td value="1.3125"></td>
      <td value="6.5625"></td>
      <td percent="5"></td>
      <td value="0.3281"></td>
    ...

CSS

:root {
  --sota-color-primary: #001f3f;
  --sota-color-primary-rgb: 0, 31, 63;
  --sota-color-primary-contrast: #f5f5f5;
  --sota-color-primary-contrast-rgb: 245, 245, 245;
  --sota-color-primary-shade: #001b37;
  --sota-color-primary-tint: #1c3754;
  --sota-color-secondary: #0074d9;
  --sota-color-secondary-rgb: 0, 116, 217;
  --sota-color-secondary-contrast: #f5f5f5;
  --sota-color-secondary-contrast-rgb: 245, 245, 245;
  --sota-color-secondary-shade: #0066be;
  --sota-color-secondary-tint: #1c83dd;
  --sota-color-tertiary: #6610f2;
  --sota-color-tertiary-rgb: 102, 16, 242;
  --sota-color-tertiary-contrast: #111;
  --sota-color-tertiary-contrast-rgb: 17, 17, 17;
  --sota-color-tertiary-shade: #590ed4;
  --sota-color-tertiary-tint: #762af3;
  --sota-color-success: #2ecc40;
  --sota-color-success-rgb: 46, 204, 64;
  --sota-color-success-contrast: #f5f5f5;
  --sota-color-success-contrast-rgb: 245, 245, 245;
  --sota-color-success-shade: #28b338;
  --sota-color-success-tint: #44d155;
  --sota-color-info: #39cccc;
  --sota-color-info-rgb: 57, 204, 204;
  --sota-color-info-contrast: #111;
  --sota-color-info-contrast-rgb: 17, 17, 17;
  --sota-color-info-shade: #32b3b3;
  --sota-color-info-tint: #4ed1d1;
  --sota-color-warning: #ffc409;
  --sota-color-warning-rgb: 255, 196, 9;
  --sota-color-warning-contrast: #111;
  --sota-color-warning-contrast-rgb: 17, 17, 17;
  --sota-color-warning-shade: #e0ac07;
  --sota-color-warning-tint: #ffca24;
  --sota-color-danger: #ff4136;
  --sota-color-danger-rgb: 255, 65, 54;
  --sota-color-danger-contrast: #111;
  --sota-color-danger-contrast-rgb: 17, 17, 17;
  --sota-color-danger-shade: #e0392f;
  --sota-color-danger-tint: #ff554c;
  --sota-color-light: #f0f0f0;
  --sota-color-light-rgb: 240, 240, 240;
  --sota-color-light-contrast: #111;
  --sota-color-light-contrast-rgb: 17, 17, 17;
  --sota-color-light-shade: #d3d3d3;
  --sota-color-light-tint: #f1f1f1;
  --sota-color-medium: #92949c;
  --sota-color-medium-rgb: 146, 148, 156;
 ...

JavaScript

let $td_value  = document.querySelectorAll( 'td[value]' ),
    $td_item    = document.querySelectorAll( 'td[item]' ),
    $td_cant    = document.querySelectorAll( 'td[cant]' ),
    $td_percent = document.querySelectorAll( 'td[percent]' );
Array.from( $td_value ).forEach( $r => {
  $r.textContent = parseFloat( $r.getAttribute('value') ).toFixed(2)
});
Array.from( $td_item ).forEach( $r => {
  $r.textContent = $r.getAttribute('item');
})
Array.from( $td_cant ).forEach( $r => {
  $r.textContent = $r.getAttribute('cant');
})
Array.from( $td_percent ).forEach( $r => {
  $r.textContent = $r.getAttribute('percent');
})