JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="eventsBlock">
</div>

CSS

.row {

   
 
}
.col-sm-3 { border:solid 1px red; }

JavaScript

var data = [{
    "name": "Alice",
    "surname": "Smith",
    "rollnum": "00002"
  },
  {
    "name": "Bob",
    "surname": "Walter",
    "rollnum": "00004"
  }
];

load();

function load() {

  var name = document.querySelector(".name");
  var surname = document.querySelector(".surname");
  $.each(data, function(index, value) {
    var $name = value.name;
    var $surname = value.surname;
    var $rollnum = value.rollnum;
    $('.eventsBlock').append(`<div class="row">
    <div class="col-md-3 col-sm-3">
      <span class="name">name: ` + $name + `</span>
    </div>
    <div class="col-md-3 col-sm-3">
      <span class="surname">surname: ` + $surname + `</span>
    </div>
    <div class="col-md-3 col-sm-3">
      <span class="rollnum">rollnum: ` + $rollnum + `</span>
    </div>
    <div class="col-md-3 col-sm-3">
      <span class="locaton">locaton: N/A</span>
    </div>
  </div><br>`);

  });
}