JSFiddle - React, Tailwind, and code Playground

by chopstik

HTML

<div class="ui-grid" style="margin-top: 10px;">
<form method="post" class="add" data="{ClientGroupID:'1'}" action="">
<table class="ui-grid-content ui-widget-content">
    <thead> 
        <tr> 
            <th class="ui-widget-header" style="width: 25%">Category<div><small>Helpdesk service charge category</small></div></th>
            <th class="ui-widget-header" style="width: 25%">Annual Cost<div><small>(excl. VAT)</small></div></th>
            <th class="ui-widget-header" style="width: 15%">Billing Period<div><small>Invoice frequency</small></div></th>
            <th class="ui-widget-header" style="width: 15%">Daily Rate<div><small>(incl. VAT)</small></div></th>
            <th class="ui-widget-header" style="width: 15%">Billing Period Invoice<div><small>(incl. VAT, approx)</small></div></th>
            <th class="ui-widget-header" style="width: 5%">Action<div><small>&nbsp;</small></div></th>
        </tr> 
    </thead> 
    <tbody>
        <tr class="green_row">
            <td style="text-align:left;"><input type="text" name="data[HelpCategory]" maxlength="25" value=""></td>
            <td style="text-align:left;"><input type="text" name="data[CostPerAnnum]" value=""></td>
            <td style="text-align:left;"><select name="data[BillingPeriod]"><option value="">Please select...</option><option value="annual">Annual</option><option value="biannual">Bi-annual</option><option value="quarterly">Quarterly</option><option value="monthly">Monthly</option><option value="weekly">Weekly</option></select></td>
            <td style="text-align:left;"></td>
            <td style="text-align:left;"></td>
            <td style="text-align:left;"><input class="ui-state-default ui-corner-all" type="submit" value="Add"></td>
        </tr>
    </tbody>
</table>
</form>

<form method="post" class="edit" data="{ClientGroupID:'1'}" action="">
<table class="ui-grid-content ui-widget-content" style="border-top:none;">
    <tbody>
        <tr class="row_1">            
    ...

CSS

/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit...