JSFiddle - React, Tailwind, and code Playground

HTML

<table class="ui-widget" style="border-collapse: collapse;">
    <thead class="ui-widget-header">
        <tr>
            <th>Module Code</th>
            <th>Module Name</th>
            <th>Module Grade</th>
        </tr>
    </thead>
    <tbody class="ui-widget-content">
        <tr>
            <tr class="moduleList">
                <td class="moduleList_id">SB005</td>
                <td class="moduleList_name">Accounting</td>
                <td class="moduleList_grade">79</td>
            </tr>
            <tr class="moduleList">
                <td class="moduleList_id">SA572</td>
                <td class="moduleList_name">Statistics</td>
                <td class="moduleList_grade">45</td>
            </tr>
            <tr class="moduleList">
                <td class="moduleList_id">SA570</td>
                <td class="moduleList_name">Methods for Business</td>
                <td class="moduleList_grade">56</td>
            </tr>
            <tr class="moduleList">
                <td class="moduleList_id">SA526</td>
                <td class="moduleList_name">Finance</td>
                <td class="moduleList_grade">89</td>
            </tr>
            <tr class="moduleList">
                <td class="moduleList_id">SA512</td>
                <td class="moduleList_name">Leisure</td>
                <td class="moduleList_grade">66</td>
            </tr>
            <tr class="moduleList">
                <td class="moduleList_id">SA510</td>
                <td class="moduleList_name">Environment</td>
                <td class="moduleList_grade">30</td>
            </tr>
        </tr>
    </tbody>
</table>