JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
<head>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container">

    <div class="header-container">
      <h1>Student Database</h1>
    </div>

    <br>

    <div class="content-container">
      <p>By Bryan</p>
      <hr>

      <div id="student-div" class="content-container">
        <script id="student-template" type="text/x-handlebars-template">
          <ol>
          {{#each students}}
     	 	  	<li><strong>{{name}}</strong>
       	  		<p>Grade: <em>{{grade}}</em></p>
       	   		<p>GPA: <em>{{gpa}}</em></p>
  					</li>
          {{/each}}
   	 			</ol>
      	</script>
      </div>
    </div>

  </div>

  <script src=asdf.js></script>
</body>

CSS

body {
  background: #000;
  font-family: sans-serif;
}

.container {
  background: #111;
  color: white;
  margin: auto;
  width: 80%;
  padding: 3%;
}

.header-container {
  background: #222;
  text-align: center;
  border: medium solid #555;
  margin: auto;
}

.content-container {
 text-align: left;
 border: medium solid #222;
 margin: auto;
 padding: 1%;
}

JavaScript

// select student-template element with JQuery, then compile it
var studentTemplate = $("#student-template").html();
var compiledStudentTemplate = Handlebars.compile(studentTemplate);

// roster object holds array of students
var roster = {
  "students": [
  	{
      "name": "Peggy Sue",
      "grade": 10,
      "gpa": 2
    },
    {
      "name": "Bobby Smith",
      "grade": 12,
      "gpa": 4
    },
    {
      "name": "Dave Davidson",
      "grade": 9,
      "gpa": 3
    }
  ]
}

// use JQuery to select the element with student-div ID, then do template stuff
$("#student-div").html(compiledStudentTemplate(roster));