JSFiddle - React, Tailwind, and code Playground

HTML

<table id="temperatures-table">
    <tbody>
        <tr>
            <td>Celsius</td>
            <td>Fahrenheit</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
    rules: all;
}

ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}

a:link,a:visited
{
opacity:0.75;
filter:alpha(opacity=75);
font-weight:bold;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:5px;
text-decoration:none;
text-transform:uppercase;
border: 1px solid white;
font-weight:bold;
}

a:hover,a:active
{
opacity:1;
filter:alpha(opacity=100);
background-color:#999999;
border: 1px solid white;
font-weight:bold;
}

h1 { font-size: 25px; }
h2 { font-size: 12px; }
h3 { font-size: 10px; position:fixed; bottom: 5px; left:0%; right:0%; font-weight:normal; }
h4 { font-size: 25px; text-transform:uppercase; }

navigationtext { font-weight:bold; text-transform:uppercase; }

JavaScript

if (document.readyState === "complete") { loadTemperatures(); }

function loadTemperatures() {
    var table = document.getElementById("temperatures-table");
    for (var i = 0; i <= 50; i++) {
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.innerHTML = i;
        var cell2 = row.insertCell(1);
        cell2.innerHTML = ((i*9/5)+32);
    }
};