JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/scripts/gettheme.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxexpander.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnavigationbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/jquery.global.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.classic.css">
    <div id='pra_nav_filter'>
        <div>
            Text search</div>
        <div>
            <table width='100%'>
                <tr>
                    <td width='35%'>
                        Text:
                    </td>
                    <td>
                        <input id="npr_txt_keywords" type="text" style="margin: 2px;" />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <div id='pra_chk_search_in_alias'>
                            Search in alias</div>
                        <div id='pra_chk_search_in_name'>
                            Search in name</div>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            Status and time</div>
        <div>
            <table width='100%'>
                <tr>
                    <td width='35%'>
                        Status:
                    </td>
                    <td>
                ...

JavaScript

$(document).ready(function () {
            // Text search filter
            $("#pra_chk_search_in_alias").jqxCheckBox({ checked: true, animationShowDelay: 100, animationHideDelay: 100, theme: 'classic' });
            $("#pra_chk_search_in_name").jqxCheckBox({ checked: true, animationShowDelay: 100, animationHideDelay: 100, theme: 'classic' });

            // Status and time filter
            $("#pra_chk_open").jqxCheckBox({ checked: true, animationShowDelay: 100, animationHideDelay: 100, theme: 'classic' });
            $("#pra_chk_running").jqxCheckBox({ checked: true, animationShowDelay: 100, animationHideDelay: 100, theme: 'classic' });
            $("#pra_chk_closed").jqxCheckBox({ checked: true, animationShowDelay: 100, animationHideDelay: 100, theme: 'classic' });
            $('#pra_cal_after').jqxDateTimeInput({ theme: 'classic', height: 22, width: 200, value: null });
            $('#pra_cal_before').jqxDateTimeInput({ theme: 'classic', height: 22, width: 200, value: $.jqx._jqxDateTimeInput.getDateTime(new Date()) });

            // filter button
            $('#pra_btn_filter').jqxButton({ width: '100%', height: '30px', theme: 'classic' });
            $('#pra_nav_filter').jqxNavigationBar({ width: '100%', theme: 'classic' });
        });