JSFiddle - React, Tailwind, and code Playground

by NadaAMA

HTML

<body>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="210" width="500"><line x1="0" y1="25" x2="300" y2="25" style="stroke:green;stroke-width:2"/>  <rect x="0.0" y="20" width="28.475336322869957" height="10" style="fill:black ;stroke-width:;stroke:rgb(0,0,0)"/><line x1="28.475336322869957" y1="20" x2="40.02242152466368" y2="11.11111111111111" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/><line x1="40.02242152466368" y1="11.11111111111111" x2="51.5695067264574" y2="20.0" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>  <rect x="51.5695067264574" y="20" width="12.780269058295964" height="10" style="fill:black ;stroke-width:;stroke:rgb(0,0,0)"/><line x1="64.34977578475336" y1="20" x2="85.76233183856502" y2="11.11111111111111" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/><line x1="85.76233183856502" y1="11.11111111111111" x2="107.17488789237669" y2="20.0" style="stroke:#5e5a5d;stroke-width:2; stroke-dasharray:5,2 "/>  <rect x="107.17488789237669" y="20" width="192.8251121076233" height="10" style="fill:black ;stroke-width:;stroke:rgb(0,0,0)"/></svg> 
    <fieldset id="output" class="form">
	<legend class="main">Output</legend>
	<br>
        
  <table cellpadding="0" cellspacing="0" class="display" id="GeneTable" style="table-layout: fixed" width="auto" >
    <tbody>
    </tbody>
  </table>







</fieldset>






</body>

CSS

td {border: 1px #ccc solid; padding: 8px;}

JavaScript

for( var j=0,g=0; g < 3; j++,g++ ) {
    //--------- start drawing the table 
    var table = document.getElementById("GeneTable");
    var row = document.createElement('tr');
    row.id="singlerow";
    
    // first col----
    
    var link="http://imgh.us/A_acidus_CBS_106_47_Aspfo1_0027407.svg";
    
    var obj = document.createElement('object');
    obj.class="alphasvg";
    obj.setAttribute('data',link );
    obj.setAttribute('height','30px');
    obj.setAttribute('width','300px');
    
    var cell3 = row.insertCell(0);
    cell3.id="genemodelcell";
    cell3.appendChild(obj);
    
    //insert row
    table.appendChild(row);

}//end for loop