JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Seach Box -->
        <input id="searchbox" type="text" class="searchFilter" onblur="if(this.value == '')this.value='Keyword(s)'" onfocus="this.value==this.defaultValue?this.value='':null" value="Keyword(s)" name="keyword">
        
            <a href="#" class="search-btn" data-search="text1 ">search 1</a>
            <a href="#" class="search-btn" data-search="intro ">search 2</a>
            <a href="#" class="search-reset">reset</a>
            
        <!-- List For Search -->
        <div class="searchable">
        <table class="table table-bordered table-striped">
          <thead>
              <tr>
                <th>Course Title</th>
                <th>Credits</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Intro to IDA</td>
                <td><code>3 credits</code></td>
                <td>Students are introduced to the materials, concepts and forms of new media, robotics, games, and sound. Through studio work, lectures, presentations, and discussion, students are familiarized with current practices of integrated digital art making.</td>
              </tr>
              <tr>
                <td>Introduction to Graphic Design</td>
                <td>
                  <code>3 credits</code>
                </td>
                <td>Students are introduced to the basic concepts of visual communication through projects that balance the learning of conceptual development, technique, and design tools. Assignments range from individual to collaborative, and are built to introduce design thinking, critical discussion and personal decision-making in relation to the choice of graphic design as major. This course offers a scoping picture of the discipline of graphic design. No prerequisite.</td>
              </tr>
              <tr>
                <td>Typography 1</td>
                <td>
                  <code>3 credits</code>
                </td>
    ...

JavaScript

$.fn.simpleContentSearch = function ( options ) {

    /**
     * Plugin Top Level Scope Variables
     * 
     */
    
    var settings = {
        'active'    : 'active',
        'normal'    : 'normal',
        'searchList' : 'searchable tr',
        'searchItem' : 'td',
        'effect' : 'none' // fade, none
    };

    var base = this;
    var options = $.extend(settings, options);
    
    /**
     * The main searching method.
     * Using the input of the user, search for (base.text())
     */
    
    function startSearching(query)
    {
        $( '.' + settings.searchList ).each(function () 
        {
            $(this).children( settings.searchItem ).each(function () 
            {
                var elem = $(this);

                if (!elem.html().match(new RegExp('.*?' + query + '.*?', 'i'))) {
                    
                    if( settings.effect == 'fade' ){
                        $(this).parent( '.' + settings.searchList ).fadeOut();
                    } else {
                        $(this).parent( '.' + settings.searchList ).hide();
                    }
                    
                } else {
                    
                    if( settings.effect == 'fade' ){
                        $(this).parent( '.' + settings.searchList ).fadeIn();
                    } else {
                        $(this).parent( '.' + settings.searchList ).show();
                    }
                    
                    return false;
                }

                return;
            });
        });
    }  

    return this.each(function() {    
        
        // On Blur
        base.blur(function () 
        {
            var elem = base;
            elem.removeClass().addClass(options.normal);
        });
        
        // On Focus
        base.focus(function () 
        {
            var elem = base;
            elem.removeClass().addClass(options.active);
        });
        
        //Keyup
        base.keyup(function () 
    ...