JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<h1>The Insanely Beautiful Challenge Counting Machine*</h1>
<div class="navContainer">
    <ul class="nav">
        <li><a href="addOne.php">Someone completed a challenge</a></li>
        <li><a href="resetAll.php">Reset all the challenges</a></li>
        <li><a href="pickWinners.php">Pick the winners</a></li>
    </ul>
</div>

<div class="tableContainer">
<table>
    
<tbody><tr><td>Elzie Honicutt</td><td>0</td></tr><tr><td>TC Eugster</td><td>0</td></tr><tr><td>Drew Theut</td><td>0</td></tr><tr><td>Henry Vanderyzyden</td><td>0</td></tr><tr><td>Kelly Murray</td><td>0</td></tr><tr><td>Anna Cannon</td><td>0</td></tr><tr><td>Ella Marie Goulet</td><td>0</td></tr><tr><td>Lily Pietryga</td><td>0</td></tr><tr><td>India Rosario</td><td>0</td></tr><tr><td>Carly Krupp</td><td>0</td></tr><tr><td>Halley Elliott</td><td>0</td></tr><tr><td>Jenna Dykstra</td><td>0</td></tr><tr><td>Lauren Zago</td><td>0</td></tr><tr><td>Maddie Meader</td><td>0</td></tr><tr><td>Lindsey VanHekken</td><td>0</td></tr><tr><td>Josh Pullen</td><td>1</td></tr><tr><td>Ella Kunitzer</td><td>0</td></tr><tr><td>Jacob Beeney</td><td>0</td></tr><tr><td>Cooper Head</td><td>0</td></tr><tr><td>Anna Knuble</td><td>0</td></tr><tr><td>Ben Collins</td><td>0</td></tr><tr><td>Jane Hoffman</td><td>0</td></tr><tr><td>Katie Steketee</td><td>0</td></tr><tr><td>Alivia Vincelj</td><td>0</td></tr><tr><td>Caroline Roth</td><td>0</td></tr><tr><td>Katie Bill</td><td>0</td></tr><tr><td>Katie Hessler</td><td>0</td></tr>
</tbody></table>

<table>
    
<tbody><tr><td>Elzie Honicutt</td><td>0</td></tr><tr><td>TC Eugster</td><td>0</td></tr><tr><td>Drew Theut</td><td>0</td></tr><tr><td>Henry Vanderyzyden</td><td>0</td></tr><tr><td>Kelly Murray</td><td>0</td></tr><tr><td>Anna Cannon</td><td>0</td></tr><tr><td>Ella Marie Goulet</td><td>0</td></tr><tr><td>Lily Pietryga</td><td>0</td></tr><tr><td>India Rosario</td><td>0</td></tr><tr><td>Carly Krupp</td><td>0</td></tr><tr><td>Halley Elliott</td><td>0</td></tr><tr><td>Jenna...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family:'Open Sans', sans-serif;
}
h1 {
    width:100%;
    text-align:center;
}
.navContainer, .tableContainer {
    text-align:center;
}
.nav {
    list-style:none;
    padding:0px;
    display:inline-block;
}
.nav li {
    display:inline-block;
    border:1px solid #aaa;
}
.nav li a {
    color:#333;
    text-decoration:none;
    display:block;
    padding:5px;
}
.nav li:hover {
    border-color:#333;
}
.nav li:nth-of-type(1):hover {
    border-color:#238C0E;
}
.nav li:nth-of-type(2):hover {
    border-color:#B81F34;
}
.nav li:nth-of-type(3):hover {
    border-color:#176DC2;
}
.nav li:hover a {
    color:#111;
}

table {
    display:inline-table;
    margin:50px;
    text-align:left;
}