JSFiddle - React, Tailwind, and code Playground

by Jedaias Rodrigues

HTML

<table border = "1" bordercolor = white class="tabela tabela2">
    <tr>
        <th colspan = "3">Língua Portuguesa</th>
    </tr>
    <tr>
        <td style="width: 80px">Nível</td>
        <td style="width: 80px">Pontos na Escala</td>
        <td style="width: 80px">Percentual (%)</td>
    </tr>
<table>
<table border = "1" bordercolor = white class="tabela zebrar">
    <tr>
        <td style="width: 92px">Nível 9</td>
        <td style="width: 94px">maior que 325</td>
        <td>0,0</td>
    </tr>
    <tr>
        <td>Nível 8</td>
        <td>300 a 325</td>
        <td>1,3</td>
    </tr>
    <tr>
    <td>Nível 7</td>
        <td>275 a 300</td>
        <td>3,8</td>
    </tr>
    <tr>
        <td>Nível 6</td>
        <td>maior que 325</td>
        <td>0,0</td>
    </tr>
    <tr>
        <td>Nível 5</td>
        <td>300 a 325</td>
        <td>1,3</td>
    </tr>
    <tr>
        <td>Nível 4</td>
        <td>275 a 300</td>
        <td>3,8</td>
    </tr>
    <tr>
        <td>Nível 3</td>
        <td>maior que 325</td>
        <td>0,0</td>
    </tr>
    <tr>
        <td>Nível 2</td>
        <td>300 a 325</td>
        <td>1,3</td>
    </tr>
    <tr>
        <td>Nível 1</td>
        <td>275 a 300</td>
        <td>3,8</td>
    </tr>
    <tr>
        <td>Nível 0</td>
        <td>125 ou menos</td>
        <td>2,5</td>
    </tr>
    <tr>
        <td colspan = "3">Nível da sua Escola: Nível 4 (211, 6 pontos)</td>
    </tr>
</table>

CSS

.tabela { text-align: center; width: 300px; background-color: rgb(175, 213, 241);}

.zebrar tr:nth-child(odd){background: rgb(204, 228, 247); border}

.tabela2 { color: white; background-color: blue; border-color: white; }