JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<table>
    <tr>
        <td>
            <label>File #</label>
            <input type="text" disabled="disabled" value="107247" style="width: 100px;" />
        </td>
        <td>
            <label>Patient</label>
            <input type="text" disabled="disabled" value="06 SURNAME, THINA" style="width: 300px;" />
        </td>
        <td>
            <label>Med. Aid</label>
            <input type="text" disabled="disabled" value="DISCOVERY FOUNDATION Acute Meds" style="width: 250px;" />
        </td>
        <td>
            <label>Med. Aid #</label>
            <input type="text" disabled="disabled" value="123456789" style="width: 100px;" />
        </td>
    </tr>
    <tr>
        <td>
            <label>Visit Date</label>
            <input type="text" value="27/01/2014" style="width: 100px;" />
        </td>
        <td>
            <label>Diagnosis ICD</label>
            <input type="text" value="J20.1" style="width: 300px;" />
        </td>
        <td>
            <label>Ref</label>
            <input type="text" value="Search for a Doctor" style="width: 250px;" />
        </td>
        <td>
            <label>Ref</label>
            <input type="text" value="" style="width: 100px;" />
        </td>
    </tr>
</table>

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px;
}
html,body {
    width: 100%;
    height: 100%;
}
label {
    display: block;
    margin-bottom: 5px;
}
th, td {
    padding: 2px;
}
table {
    border-collapse: separate; 
    border-spacing: 10px;
}
input {
    border: 1px solid #ccc;
    padding: 4px;
}