JSFiddle - React, Tailwind, and code Playground

by inspired_jw

HTML

<table id="edit_profile">
    <tr>
        <td class="label">Username</td><td class="input">inspired_jw</td>
    </tr>
    <tr>
        <td class="label">Current Password</td><td class="input"><input type="password" /></td>
    </tr>
    <tr>
        <td class="label">New Password</td><td class="input"><input type="password" /></td>
    </tr>
    <tr>
        <td class="label">Upload A Profile Picture</td><td class="input"><img src="http://zooqoos.com/static/img/main/profile-default.png" alt="inspired_jw" />
                <span>40px x 40px</span>
                <input type="file" /></td>
    </tr>
    <tr>
        <td class="label">Language</td>
        <td class="input"><select><option value="en" selected="selected">English</option><option value="ko">Korean</option></select></td>
    </tr>
    <tr class="tail">
        <td colspan="2"><button>Save Changes</button><button>Cancel</button></td>
    </tr>
</table>

CSS

table#edit_profile {
    border-radius: '5px 5px 5px 5px';
    border: 'none'; 
    padding: '15px';
    background-color: #000;
    -webkit-border-radius: '10px';
    -moz-border-radius: '10px';
    opacity: .7;
    color: #fff;
}
table#edit_profile td { border:1px solid #777; font-size:15px; display:table-cell; vertical-align:middle; }
table#edit_profile td.label { text-align:right; padding:3px; }
table#edit_profile td.input { text-align:left; padding:3px; width:200px; }
table#edit_profile td.input img { float:left; height:40px; display:inline-block; }
table#edit_profile td.input span { float:left; height:auto; padding:2px; display:inline-block; margin-top:10px; }
table#edit_profile input[type="file"] { padding:5px 0; width:auto; }
table#edit_profile tr.tail td { padding:5px 20px 5px 0; text-align:right; }