JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="position: relative;">
    <fieldset style="width: 17em;" class="loginField"><legend align="right">Log in</legend>
    <table cellspacing="0" cellpadding="0" class="loginVerticalPanel" style="height: auto;">
        <tbody>
            <tr>
                <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Username:</div></td>
            </tr>
            <tr>
                <td align="left" style="vertical-align: top;"><input type="text" class="gwt-TextBox" style="height: auto; width: 100%;"></td>
            </tr>
            <tr>
                <td align="left" style="vertical-align: top;"><div class="gwt-Label" style="height: auto; width: 100%;">Password:</div></td>
            </tr>
            <tr>
                <td align="left" style="vertical-align: top;"><input type="password" class="gwt-PasswordTextBox" style="height: auto; width: 100%;"></td>
            </tr>
            <tr>
                <td align="left" style="vertical-align: top;">
                    <table cellspacing="0" cellpadding="0" style="width: 100%;">
                        <tbody>
                            <tr>
                                <td align="left" style="vertical-align: top;">
                                    <img class="gwt-Image" title="Loading" style="display: none;" alt="Loading" src="assets/square_circles.gif">
                                </td>
                                <td align="right" style="vertical-align: top;">
                                    <button type="button" class="loginButton" style="height: 25px;">&gt;&gt;&nbsp;&nbsp;&nbsp;GO</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="left" style="vertical-align: top;"><div class="loginWarning" style="display: none; width:...

CSS

.loginButton {
    background: -moz-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(90deg, #0459B7, #08ADFF) repeat scroll 0 0 transparent;
    border: 1px solid #093C75;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 0 1px 0 #FFFFFF;
    -moz-box-shadow: 0 1px 0 #FFFFFF;
    box-shadow: 0 1px 0 #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-right: -1em;
    margin-top: 1em;
    padding: 5px 10px;
    text-decoration: none;
    -moz-text-shadow: 0 1px 1px #333333;
    -webkit-text-shadow: 0 1px 1px #333333;
    text-shadow: 0 1px 1px #333333;
    text-transform: uppercase;
}
.loginButton:hover {
    background: -moz-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(90deg, #067CD3, #0BCDFF) repeat scroll 0 0 transparent;
    border-color: #093C75;
    text-decoration: none;
}
.loginButton:active {
    background: -moz-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(90deg, #0BCDFF, #067CD3) repeat scroll 0 0 transparent;
    border-color: #093C75;
    outline: medium none;
}
.loginWarning {
    padding-top: 0.2em;
    font-family: 'Aldrich', sans-serif;
    color:#FE2E2E;
    font-size: 12px;
    font-weight: 400;
}
.loginField {
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    border: 0;
    background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
    border: 1px solid #AAAAAA;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 0 0 15px...