JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
table.tableizer-table {
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
} 
.tableizer-table td {
    padding: 4px;
    margin: 3px;
    border: 1px solid #ccc;
}
.tableizer-table th {
    background-color: #104E8B; 
    color: #FFF;
    font-weight: bold;
}
</style>

<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>select_type</th><th>table</th><th>type</th><th>possible_keys</th><th>key</th><th>key_len</th><th>ref</th><th>rows</th><th>extra</th></tr>
 <tr><td>1</td><td>SIMPLE</td><td>budget_categories</td><td>ref</td><td>PRIMARY,BudgetAreaId</td><td>PRIMARY</td><td>4</td><td>const</td><td>8</td><td>Using temporary; Using filesort</td></tr>
 <tr><td>1</td><td>SIMPLE</td><td>budget_expenses</td><td>ref</td><td>BudgetId,ExpenseDate,BudgetAreaId,BudgetCategoryId</td><td>BudgetCategoryId</td><td>5</td><td>kalkyl.budget_categories.BudgetCategoryId</td><td>184</td><td>Using where</td></tr>
 <tr><td>1</td><td>SIMPLE</td><td>budget_types</td><td>eq_ref</td><td>PRIMARY,BudgetAreaId</td><td>PRIMARY</td><td>12</td><td>const,kalkyl.budget_categories.BudgetCategoryId,kalkyl.budget_expenses.BudgetTypeId</td><td>1</td><td></td></tr></table>