JSFiddle - React, Tailwind, and code Playground

HTML

<div id="enclosure_wrappa">
<div id="enclosure_form">
    <form>
        <div id="range">
            <label for="min">Minimum Height:</label>
            <select id="min">
                <option selected="selected" value="0">0</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
                <option value="250">250</option>
                <option value="300">300</option>
                <option value="350">350</option>
                <option value="400">400</option>
                <option value="450">450</option>
                <option value="500">500</option>
                <option value="550">550</option>
                <option value="600">600</option>
                <option value="650">650</option>
                <option value="700">700</option>
                <option value="750">750</option>
                <option value="800">800</option>
                <option value="850">850</option>
                <option value="900">900</option>
                <option value="950">950</option>
                <option value="1000">1000</option>
                <option value="1050">1050</option>
                <option value="1100">1100</option>
                <option value="1150">1150</option>
                <option value="1200">1200</option>
                <option value="1250">1250</option>
            </select>
            <br/>
            <label for="max">Maximum Height:</label>
            <select id="max">
                <option value="0">0</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="150">150</option>
                <option value="200">200</option>
                <option value="250">250</option>
                <option value="300">300</option>
                <option value="350">350</option>
               ...

CSS

body {
margin:0;
padding:0;
}
#enclosure_wrappa {
width:880px;
margin:0 auto;
font-size:12px;
font-family: Arial, Verdana, 'sans-serif';
}
#enclosure_form {
width:260px;
margin:10px;
float:left;
}
#enclosure_form select {
width:100%;
}
#enclosure_data {
width:580px;
margin:10px;
float:left;
}
.hide_height, .hide_width, .hide_depth, .hide_material, .hide_ip_rating, .hide_cover_type, .hide_rec_use {
display:none;
}
/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* 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 @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *...

JavaScript

function showData(e, v, t) {
    // element, values, type
    
    // match the element with the td index
    var td = {
        'height': 2,
        'width': 3,
        'depth': 4,
        'material': 5,
        'ip_rating': 6,
        'cover_type': 7,
        'rec_use': 9
    };
    
    // give or remove exclusive classes to each row
    // from the element which was used which will show or hide the row
    
    // condition and function for range sliders
    if (t === 'range') {
        $('.results tr').each(function () {
            var d = parseInt($(this).find('td:eq(' + td[e] + ')').text(), 10);
            if (d >= v[0] && d <= v[1]) {
                $(this).removeClass('hide_' + e);
            } else {
                $(this).addClass('hide_' + e);
            }
        });
    } else { // condition and function for everything else (multi selects)
        var allInV = jQuery.inArray('All', v);
        if (allInV !== -1) {
            $('.results tr').removeClass('hide_' + e);
        } else {
            $('.results tr').each(function () {
                var d = $(this).find('td:eq(' + td[e] + ')').text();
                var dInV = jQuery.inArray(d, v);
                if (dInV !== -1) {
                    $(this).removeClass('hide_' + e);
                } else {
                    $(this).addClass('hide_' + e);
                }
            });
        }
    }
}

// test the time to modify each row in the table
function testTime() {
    var start = (new Date).getTime();
    showData('height', [0, 0], 'range');
    showData('height', [0, 1250], 'range');
    showData('width', [0, 0], 'range');
    showData('width', [0, 1250], 'range');
    showData('depth', [0, 0], 'range');
    showData('depth', [0, 400], 'range');
    var diff = (new Date).getTime() - start;
    var delay = diff / 6 + 100;
    return delay;
}

function initSliders() {
    
    // jQuery UI sliders replace the dropdown selects
    // While a slider is sliding, values are shown...