JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="searchFilter" onblur="if(this.value == '')this.value='Seach using Keyword(s)'" onfocus="this.value==this.defaultValue?this.value='':null" value="Seach using Keyword(s)" name="keyword" style="width:200px">  
<br/><br/>


<div class="imgcontainer"  style="display: block; visibility: visible; width: 307px; overflow: hidden; margin-top:10px;">
             <div class="any use" style="opacity: 1; ">
						 <a href="http://www.google.com" target="_blank">google</a>
                
             </div>
             <div class="metadata" style="display: block; opacity: 0.3; left: 0px; ">Keywords(can be hidden/obtained from database):
                 <span class="Keyword">search engine</span>,
                 <span class="Keyword">android</span>,
                 <span class="Keyword">gmail</span>
             </div>
             <!-- This element specific any HTML code -->
</div>

<div class="imgcontainer"  style="display: block; visibility: visible; width: 307px; overflow: hidden; margin-top:10px;">
             <div class="Any" style="opacity: 1; ">
						 <a href="http://www.microsoft.com" target="_blank">microsoft</a>
                
             </div>
             <div class="metadata" style="display: block; opacity: 0.3; left: 0px; ">Keywords(can be hidden/obtained from database):
                 <span class="Keyword">operating system</span>,
                 <span class="Keyword">office</span>,
                 <span class="Keyword">database</span>
             </div>
                 <div class="Any"></div>
</div>

CSS

.imgcontainer{
	margin-left:130px;
	
}

JavaScript

$.fn.simpleContentSearch = function(options) {

    /**
    * Plugin Top Level Scope Variables
    *
    */

    var defaults = {
        'active': 'active',
        'normal': 'normal',
        'searchList': 'container',
        'searchItem': 'span',
        'effect': 'none' // fade, none
    };

    var base = this;
    var settings = $.extend({}, defaults, options);

    /**
    * The main searching method.
    * Using the input of the user, search for (base.text())
    */

    function startSearching(query) {
        $('.' + settings.searchList).each(function() {
            $(this).find(settings.searchItem).each(function() {
                var elem = $(this);

                if (!elem.html().match(new RegExp('.*?' + query + '.*?', 'i'))) {

                    if (settings.effect == 'fade') {
                        $(this).closest('.' + settings.searchList).fadeOut();
                    } else {
                        $(this).closest('.' + settings.searchList).hide();
                    }

                } else {

                    if (settings.effect == 'fade') {
                        $(this).closest('.' + settings.searchList).fadeIn();
                    } else {
                        $(this).closest('.' + 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() {
            startSearching(base.val());
            //here Karmik write a function that checks if no desired class is available, then show
            // mesasge that "No Result Found"

        });

      ...