JSFiddle - React, Tailwind, and code Playground

HTML

<table >
    
    <tr>
<td>testtest</td>
<td>testtest</td>
<td>Centered long text here and it is centered, why do you say it's not centering</td>
<td>test</td>
<td>test</td>
</tr>
    
</table>

CSS

table {
    width:100%;border:solid 1px red; color:white;  
    border-collapse: collapse;
}
td{
    text-align: center;
    color: red;
    border: 1px solid red;
    width: 200px;
}