JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width">

<table>
    <thead>
        <tr>
            <th>Enabled</th>
            <th>Disabled</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" disabled /></td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" disabled /></td>
        </tr>
        <tr>
            <td><input type="radio" /></td>
            <td><input type="radio" disabled /></td>
        </tr>
        <tr>
            <td><select></select></td>
            <td><select disabled></select></td>
        </tr>
        <tr>
            <td><textarea></textarea></td>
            <td><textarea disabled></textarea></td>
        </tr>
    </tbody>
</table>
                
<table>
    <thead>
        <tr>
            <th>Enabled w/Value</th>
            <th>Disabled w/Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="Value" /></td>
            <td><input type="text" disabled value="Value"></td>
        <tr>
            <td><input type="checkbox" checked /></td>
            <td><input type="checkbox" disabled checked /></td>
        </tr>
        <tr>
            <td><input type="radio" checked /></td>
            <td><input type="radio" disabled checked /></td>
        </tr>
        <tr>
            <td><select><option selected>Value</option></select></td>
            <td><select disabled><option selected>Value</option></select></td>
        </tr>
        <tr>
            <td><textarea>Value</textarea></td>
            <td><textarea disabled>Value</textarea></td>
        </tr>
    </tbody>
</table>

CSS

table { margin: 10px; }
th { font-weight: bold; text-decoration: underline; }
th, td { padding: 5px; }
textarea { margin-right: 10px; }