JSFiddle - React, Tailwind, and code Playground

HTML

<table>
            <thead>
                <tr>
                    <th style="width: 150px;">Serveur</th>
                    <th style="width: 500px;">Alerte</th>
                    <th style="width:auto;">Output</th>
                </tr>
            </thead>
            <tbody>
                <tr class="event">
                    <td style="padding-left:5px;">TEST1</td>
                    <td>TEST1</td>
                    <td>TEST1</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST2</td>
                    <td>TEST2</td>
                    <td>TEST2</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST3</td>
                    <td>TEST3</td>
                    <td>TEST3</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">TEST4</td>
                    <td>TEST4</td>
                    <td>TEST4</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">test5</td>
                    <td>test5</td>
                    <td>test5</td>
                </tr>
                <tr class="event">
                    <td style="padding-left:5px;">test6</td>
                    <td>test6</td>
                    <td>test6</td>
                </tr>   
                <tr class="event">
                    <td style="padding-left:5px;">test7</td>
                    <td>test7</td>
                    <td>test7</td>
                </tr>                   
            <tbody>
        </table>

CSS

table tbody tr:nth-child(n+1):nth-child(-n+4){
    background-color: green;
}
table tbody tr:nth-child(n+4):nth-child(-n+8){
    background-color: red;
}