JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

HTML

<div id="viewer"></div>

CSS

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  /*  padding: 15px; */
  width: 100px;
  text-align: center;
}

th {
  font-weight: 900;
  height: 30px;
  vertical-align: middle;
  padding-bottom: 10px;
}

td {
  padding-top: 5px;
  padding-bottom: 5px;
  height: 20px;
  vertical-align: middle;

}

.sec-text {

  color: grey;

}

JavaScript

function thisOne() {

  let view = document.getElementById("viewer")

  /* var view = document.querySelector("#viewer");
   */

  let xyz = 18;
  let yz = 17;
  let y = 0;
  let ydiff = 0 + (xyz - yz) / 2;
  console.log("yfid", ydiff);
  let value = 60;
  let maxValue = 80;
  let unWidth = value / maxValue;

  let result = [`<table><tr><th>Test Name<br><br><span class="sec-text">Range</span></th><th>One<br><br><span class="sec-text">Two</span></th><th>One<br><br><span class="sec-text">Two</span></th><th>One<br><br><span class="sec-text">Two</span></th><th>One<br><br><span class="sec-text">Two</span></th></tr>`]

  /* result.push(`<tr><th>One</th><th>One</th><th>One</th><th>One</th><th>One</th></tr>`) */




  result.push(`<tr><td>Heyo</td><td>Hello</td><td>Hola</td><td>Hey</td><td>Hi</td></tr>`)
  result.push(`<tr><td>Heyo</td><td>Hello</td><td>Hola</td><td>Hey</td><td>Hi</td></tr>`)

  result.push(`<tr><td>Heyo</td><td><svg height="18" width="100">
          <rect x="0" y="${y}" width="${maxValue}" height="${xyz}" rx="10px" fill="#E3E3E3" />
          <rect x="2" y="${ydiff}" width="${value}" height="${yz}" rx="10px" fill="#FF6363" /></td></tr> `)

  result.push(`</table>`)

  let resultant = result.join('')

  console.log(result)

  view.innerHTML = resultant


  return result;
}

thisOne();