JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<!doctype html>
<html ng-app>
    <head>
        <title>testcase</title>
    </head>
    <body>
        <div>
            <label for="search">Search:</label>
            <input type="text" name="search" id="search" placeholder="Enter something."/> 
            
            <div>
                <span>__ words found matching __</span>
            </div>
            <article >
                <section>
                    <h1>Search the dog</h1>
                    <p>
                        The quick brown fox jumps over the lazy dog. <br/>
                        Over the lazy dog jumps the quick brown fox. <br/>            
                    </p>
                </section>
            </article>
        </div>
        <hr/>
        <div>
            <label for="search">Search:</label>
            <input type="text" name="search" id="search" value="dog" placeholder="Enter something."/> 
                        
            <div>
                <span>2 words found matching <u>dog</u></span>
            </div>
            
            <div class="searchResults">
                <a href="#result-1">dog</a> ,
                <a href="#result-2">dog</a>
            </div>    
            <article >
                <section>
                    <h1>Expexted Result..</h1>
                    <p>
                        The quick brown fox jumps over the lazy <span id="result-1" class="result">dog</span>. <br/>
                        Over the lazy <span id="result-2" class="result">dog</span> jumps the quick brown fox. <br/>            
                    </p>
                </section>
            </article>
        </div>
    </body>
</html>

CSS

.result{
    display: inline-block;
    border-radius:5px;
    padding:4px;
    color:black;
    background:#FFEC9E;
}

JavaScript

$('.searchResults a').click(function(){
    var idResult = $(this).attr('href');
    $( idResult ).animate({ opacity: 0.5, backgroundColor: 'orange' }, 200 ).animate({ opacity: 1.0, backgroundColor: '#FFEC9E'}, 800 );
});