JSFiddle - React, Tailwind, and code Playground

HTML

<div align=center><a href="a" class="navy small btn">Mapping Tools</a>
        <a href="b" class="teal small btn">Charting Tools</a>
        <a href="c" class="green small btn">Analyzing Data</a>
        <a href="d" class="yellow small btn">Programming Tools</a>
        <a href="e" class="orange small btn">Other Data Tools</a></div>

<br>
<br>
<br>
        <table id="tools" border=1 cellpadding=7>
            <thead>
            <th>Program</th>
            <th>Type</th>
            <th>Skill Level</th>
            <th>Website</th>
            

        </thead>
        <tbody>
            <tr>
                {% for obj in object_list %}

                <td><a href="{{ obj.id }}/">{{ obj.program }}</a></td>
                <td>{{ obj.type }}</td>
                <td>{{ obj.skill_level }}</td>
                <td><a href="{{ obj.website }}/">{{ obj.website }}</a></td>
                </tr>
            {% endfor %}
        </tbody>
        </table>v

CSS

body { font-family: 'Open Sans', sans-serif; padding-right: 0px; padding-left: 0px; height: auto; }


.btn {
  background: #CCC; 
  color: #FFF;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  line-height: 100px;
  width: 300px;
  padding: 50 30px;
  text-decoration: none; 
}

.small.btn {
  line-height: 75px;
  width: 100px;
  padding: 50 50px;

}

.large.btn {
  line-height: 300px;
  width: 250px;
  padding: 0 3.5em; 
}

.navy.btn {
  background: linear-gradient(#004358,#004358);
  text-shadow: 1px 1px 1px #004358; 
}

.teal.btn {
  background: linear-gradient(#1F8A70,#1F8A70);
  text-shadow: 1px 1px 1px #1F8A70; 
}

.green.btn {
  background: linear-gradient(#BEDB39,#C5FF56);
  text-shadow: 1px 1px 1px #C5FF56; 
}

.yellow.btn {
  background: linear-gradient(#FFE11A,#FFEE66);
  text-shadow: 1px 1px 1px #FFEE66; 
}

.orange.btn {
  background: linear-gradient(#FD7400,#FD9B39);
  text-shadow: 1px 1px 1px #FD9B39; 
}

.blue.btn {
  background: linear-gradient(#11A1D6,#0E86B2);
  text-shadow: 1px 1px 1px #0E86B2; 
}

.btn:hover { 
  box-shadow: inset 10px 10px 10px rgba(255,255,255,0.2), 
  inset 0px 20px 20px 0px rgba(255,255,255,0.3);
}

.btn:active { 
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 
  inset 0 20px 10px rgba(0,0,0,0.3); 
}

JavaScript

$(document).ready( function () {
        $('#tools').DataTable();
        } );