JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id='requestTable'>
    <tr>
        <td colspan="4">
            <div id="itemInformation">2) ITEM INFORMATION</div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="itemLabel">CPM Item Number: </div>
            <input class="itemText" type="text" data-bind="    value: cpmItemNumberItem, disable: cpmItemNumberItem" />
        </td>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="itemLabel">Resource Type:</div>
            <input class="itemText" type="text" data-bind="    value: resourceType, disable: resourceType" />
        </td>
        <td colspan="2">
            <div class="itemLabel">Product Category: </div>
            <input class="itemText" type="text" data-bind="    value: cpmProductCategory, disable: cpmProductCategory" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="itemLabel">Vendor (Primary Supplier):</div>
            <input class="itemText" type="text" data-bind="value: vendor, disable: vendor" />
        </td>
        <td>
            <div class="itemLabel">Manufacturer:</div>
            <input class="itemText" type="text" data-bind="value: manufacturer, disable: manufacturer" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div>Long Description:</div>
            <input class="itemText" type="text" data-bind="value: longDescription, disable: longDescription" />
        </td>
        <td>
            <div>Short Description(Lawson):</div>
            <input class="itemText" type="text" data-bind="    value: shortDescription, disable: shortDescription" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div>Manufacturer Catalog Number:</div>
            <input class="itemText" type="text" data-bind="    value:...

CSS

table {
    border: 1px solid #E8EEF4;
    border-collapse: collapse;
}
body {
    color: #696969;
    font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
    font-size: 1em;
}

JavaScript

var dtRequest = $('#requestTable').dataTable({
            bJQueryUI: true,
            "iDisplayLength": 100,
            "aLengthMenu": [[20, 100, 500, 1000, 5000, -1], [20, 100, 500, 1000, 5000, "All"]]
        });