JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Just for fun</title>
  </head>
  <body>
    <h3>Cars and types:</h3>
    <form name="myForm" onsubmit="return mysubmit()">
      Model: <input type="text" name="model"><br>
      Count: <input type="text" name="count"><br>
      Details: <input type="text" name="details"><br>
      <input type="submit" value="Submit">
    </form>
    <button onclick="generate_table()">Generate Table</button><br>
    <table class="cars">
    </table>
    <div class="details" style="float:right;">
    </div>
    <script>
      var cars = [
          {model: "BMW", count: 23, details: "<p>I like <b>X6</b> from Germany</p>"},
          {model: "Hyundai", count: 30, details: "<p>I have <b>Verna</b> from Korea</p>"},
          {model: "Toyota", count: 08, details: "<p>Small <b>Yaris</b> from Japan</p>"},
          {model: "Fiat", count: 12, details: "<p>Latest <b>500c</b> from Italy</p>"}
      ]

      var types = ["model","count","details"];

      function generate_table() {
          cars.sort(compare);
          var body = document.getElementsByTagName("body")[0];
         
          // creates a <table> element and a <tbody> element
          var tbl     = document.getElementsByClassName("cars")[0];
          tbl.innerHTML = '';
          var tblBody = document.createElement("tbody");
          for (var j = 0; j < (cars.length/3|0)+1; j++) {
              // creates a table row
              var row = document.createElement("tr");
           
              for (var i = 0; i < 3; i++) {
                  var index = ((j*3)+i);
                  if (index < cars.length) {
                      // Create a <td> element and a text node, make the text
                      // node the contents of the <td>, and put the <td> at
                      // the end of the table row
                      var cell = document.createElement("td");
                      var num = index;
                      cell.innerHTML = '<a href="#"...