JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<input type="text" id="searchBox" value="Search..." class="search" />

<table id="MyTable">
    <thead>
        <tr id="MyTableHeaders">       
            <th><a href="">Code</a></th>
            <th><a href="">Name</a></th>
        </tr>
    </thead>
    <tbody id="MyTableData"></tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                <ul id="MyTablePager"></ul>
                <div  id="MyTablePageSize">
                    Items per Page: 
                    <select>
                        <option value = "5" selected="selected">5</option>
                        <option value = "10">10</option>
                        <option value = "15">15</option>
                        <option value = "20">20</option>
                        <option value = "25">25</option>
                    </select>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

CSS

body {
 font-family: Helvetica, Arial, Sans-serif;
 font-size: .875em;
 padding: 15px;    
}

a {
 text-decoration: none;   
}

table {
 width: 100%;   
}

table tr td, tr th {
 padding: 5px 8px;
 border: solid 1px black;    
}

table tr th {
 background-color: #234561;
  
}

table tr th a {
 color: #ffffff;
 font-size: 1.3em;     
}

table tr th a:hover {
 text-decoration: underline;   
}

.active {
 font-weight: bold;   
}

input[type=text] {
 padding: 5px 8px;   
}

#searchBox {
 margin-bottom: 15px;
 width: 150px;   
}

.search {
 color: #888888;
 font-style: italic;    
}

#MyTablePager {
 height: .875em;  
 display: inline-block;    
}

#MyTablePager li {
 float: left;
 margin-right: 6px;
}

#MyTablePageSize {
 margin: 0; padding: 0; 
 display: inline-block;   
 float:right;    
}

JavaScript

var data = [
            { ID: '1', Code: 'AA001', Name: 'Armguard of Ether Negation' },        
            { ID: '2', Code: 'AA002', Name: 'Barbaric Titan\'s Cube of Just Crushers' }, 
            { ID: '3', Code: 'AA003', Name: 'Boots of Alter Healing' }, 
            { ID: '4', Code: 'AA004', Name: 'Compassionate Gibberers\' Warhammer' }, 
            { ID: '5', Code: 'AA005', Name: 'Corrupt Feline\'s Shoes of the Celestial Spell of Opening' }, 
            { ID: '6', Code: 'AA006', Name: 'Divinities\' Mace of the Sorcery of Deflect Sludge' }, 
            { ID: '7', Code: 'AA007', Name: 'Elf\'s Glaive' }, 
            { ID: '8', Code: 'AA008', Name: 'Fine Fish\'s Harp of Bone and Triumph' }, 
            { ID: '9', Code: 'AA009', Name: 'Dancing Voluge of Flesh Touch' }, 
            { ID: '10', Code: 'AA010', Name: 'Forbidden Sycthe of the Humanoids' }, 
            { ID: '11', Code: 'AA011', Name: 'Fortuitous Wizards\' Bola of the Compassionate Thinker' }, 
            { ID: '12', Code: 'AA012', Name: 'Foul Banded Mail of Nothing Assault' }, 
            { ID: '13', Code: 'AA013', Name: 'Good Demon\'s Banded Mail of Light Ball' }, 
            { ID: '14', Code: 'AA014', Name: 'Kingly Sling' }, 
            { ID: '15', Code: 'AA015', Name: 'Lordly Spirit\'s Contraption' }, 
            { ID: '16', Code: 'AA016', Name: 'Perfect Speaker\'s Shield of Ogre Calling' }, 
            { ID: '17', Code: 'AA017', Name: 'Quarrel of Muck Chains' }, 
            { ID: '18', Code: 'AA018', Name: 'Ring Mail of Knowledge Circle' }, 
            { ID: '19', Code: 'AA019', Name: 'Ring Mail of Radiance Absorbtion' }, 
            { ID: '20', Code: 'AA020', Name: 'Sadistic Keeper\'s Hauberk of Muck Storms' }, 
            { ID: '21', Code: 'AA021', Name: 'Spectral Armguard of the Haunt' }, 
            { ID: '22', Code: 'AA022', Name: 'Tower Shield of Alter Spirit' }, 
            { ID: '23', Code: 'AA023', Name: 'Trumpet of Drake Slaying' }, 
            { ID: '24', Code:...