JSFiddle - React, Tailwind, and code Playground

by develax

HTML

<script src="https://cdn.jsdelivr.net/npm/raz@0.0.80/raz.js"></script>
<div id="target">
</div>

CSS

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

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

table td:nth-child(2) {
  text-align: right;
}

JavaScript

const countries = [
 { name: "Russia", area: 17098242 },
 { name: "Canada", area: 9984670 },
 { name: "United States", area: 9826675 },
 { name: "China", area: 9596960 },
 { name: "Brazil", area: 8514877 },
 { name: "Australia", area: 7741220 },
 { name: "India", area: 3287263 }
];

const template = `
<table>
  <tr>
    <th>Country</th>
    <th>Area sq.km</th>
  </tr>
  @for(var i = 0; i < Model.length; i++){
    var country = Model[i];
    <tr>
      <td>@country.name</td>
      <td>@country.area</td>
    </tr>
  }
</table>`;

const html = raz.render(template, countries);
document.getElementById("target").innerHTML = html;