JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Students</h1>
<div id="output">

</div>
<script src="js/students.js"></script>
<script src="js/student_report.js"></script>
</body>
</html>

CSS

@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  background: #fff;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: #8d9aa5;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 500;
  color: #384047;
}

h1 {
  font-size: 1.8em;
  margin: 60px 0 40px;
}

h2 {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 30px 0 10px 0;
}

#home h2 {
  margin: -40px 0 0;
}

h3 {
  font-size: .9em;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 300;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

ol {
  margin: 0 0 20px 32px;
  padding: 0;
}

#home ol {
  list-style-type: none;
  margin: 0 0 40px 0;
}

li {
  padding: 8px 0;
  display: list-item;
  width: 100%;
  margin: 0;
  counter-increment: step-counter;
}

#home li::before {
    content: counter(step-counter);
    font-size: .65em;
    color: #fff;
    font-weight: 300;
    padding: 2px 6px;
    margin:  0 18px 0 0;
    border-radius: 3px;
    background:#8d9aa5;
    line-height: 1em;
}

.lens {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #8d9aa5;
  border-radius: 5px;
  position: absolute;
  margin: 5px 0 0 -19px;
}

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

span {
  color: red;
}

JavaScript

var message = '';
var student;
var search;
var registor = [];
var students = [ 
  { 
   name: 'Dave',
    track: 'Front End Development',
    achievements: '158',
    points: '14730',
    ID: 0
  },
  {
      name: 'Jody',
      track: 'iOS Development with Swift',
      achievements: '175',
      points: '16375',
    ID: 1
  },
  {
    name: 'Dave',
    track: 'PHP Development',
    achievements: '55',
    points: '2025',
      ID: 2
  },
  {
      name: 'Jody',
      track: 'Learn WordPress',
      achievements: '40',
      points: '1950',
      ID: 3
  },
  {
    name: 'Sam',
    track: 'Rails Development',
    achievements: '5',
    points: '350',
      ID: 4
  }
];

//To print message to output div.
function print(message) {
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = message;
}

//Bring the registor into html format and stor it into report.
function getStudentReport()
{
    var report = '';

    for (var m = 0; m < registor.length; m += 1)
    {
            console.log(search);
            report += '<h2>Student: ' + registor[m].name + '</h2>';
            report += '<p>Track: ' + registor[m].track + '</p>';
            report += '<p>Points: ' + registor[m].points + '</p>';
            report += '<p>Achievements: ' + registor[m].achievements + '</p>';           
    }
    return report;    
}
// compare will check if any student have the same name.
function compare() {

    for (var i = 0; i < students.length; i += 1) {
        studentFirst = students[i];
        studentFirstName = students[i].name;
        studentLower = students[i].name.toLowerCase();
        

        for (var n = 0; n < students.length; n += 1) {
            student2 = students[n];
            student2Name = students[n].name;
            if ((studentFirstName === search || studentLower === search) && studentFirst.ID === student2.ID) {
                registor.push(studentFirst);
                console.log(registor);
            }
        }
    }
   ...