JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr><th></th><th>Correct</th><th>W3C</th></tr>
</thead>
<tbody>
<tr>
<td>text input</td>
<td><input type="text" class="correct" style="width: 100px;">
<td><input type="text" style="width: 100px;">
</tr>
<tr>
<td>select</td>
<td><select class="correct" style="width: 100px;">foo</select>
<td><select style="width: 100px;">foo</select>
</tr>
<tr>
<td>button</td>
<td><input type="button" class="correct" style="width: 100px;">
<td><input type="button" style="width: 100px;">
</tr>
<tr>
<td>image</td>
<td><input type="image" class="correct" style="width: 100px; border: 1px solid black;">
<td><input type="image" style="width: 100px; border: 1px solid black;">
</tr>
<tr>
<td>password</td>
<td><input type="password" class="correct" style="width: 100px;">
<td><input type="password" style="width: 100px;">
</tr>
<tr>
<td>submit</td>
<td><input type="submit" class="correct" style="width: 100px;">
<td><input type="submit" style="width: 100px;">
</tr>
</tbody>
</table>
CSS
* {
}
td {
}
.correct {
box-sizing: border-box;
}