JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<script src="https://rawgit.com/dpheitmeyer/34050bc565308a3865ad/raw/00b4d76590b07fcf43998985c506ccfc393a20df/table-highlight.js"></script>
<h1>Harvard University Presidents<br/> in the 20th and 21st Centuries</h1>
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Term</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Drew Gilpin Faust</th>
    <td>2001-present</td></tr>
    <tr>
      <th scope="row">Lawrence H. Summers</th>
      <td>2001-2006</td>
    </tr>
    <tr>
      <th scope="row">Neil L. Rudenstine</th>
      <td>1991-2001</td>
    </tr>
    <tr>
      <th scope="row">Derek Bok</th>
      <td>1971-1991</td>
    </tr>
    <tr>
      <th scope="row">Nathan Marsh Pusey</th>
      <td>1953-1971</td>
    </tr>
    <tr>
      <th scope="row">James Bryant Conant</th>
      <td>1933-1953</td>
    </tr>
    <tr>
      <th scope="row">A(bbott) Lawrence Lowell</th>
      <td>1909-1933</td>
    </tr>
    <tr>
      <th scope="row">Charles William Eliot</th>
      <td>1869-1909</td>
    </tr>
  </tbody>
</table>
<p>
  <a href="http://www.harvard.edu/about-harvard/harvard-glance/history-presidency">Read more about the History of the Presidency at Harvard</a>
</p>

CSS

body {
  font-family: helvetica, sans-serif;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: thin solid grey;
  padding: 0.25em;
}

th.highlight {
  background-color: #A9A9A9;
}

td.highlight {
  background-color: #DC143C;
}

JavaScript

$(document).ready(function() {
  $('table').tableHighlight();
});