JSFiddle - React, Tailwind, and code Playground

HTML

<div id="faqPage" class="content">
     <h1 class="pageTitle">
                Frequently Asked Questions            </h1>

    <div class="input-wrapper faq-search">
        <label for="deskSupportCenterSearch" class="persistent-placeholder">Search FAQs</label>
        <input id="deskSupportCenterSearch" name="deskSupportCenterSearch"
        class="text">
    </div>
    <hr>
    <div class="noResults">Sorry, no questions or answers match your search.</div>
    <div class="popular">
        <div class="section">Popular</div>
        <div class="articleRow" data-id="922357">
            <div class="question" data-article_id="922357" data-factor="expanded">How do I make sure I always earn cash back? (DO's and DON'Ts)</div>
            <div
            class="answer">
                <div class="answerContent">
                    <ul>
                        <li>	<span>DO enable cookies on your browser while you are shopping.<span class="Apple-converted-space">&nbsp;</span></span>Stores
                            use cookies to track your purchase so you can get cash back from Extrabux!
                            Remember, if the store doesn't track your purchase, Extrabux does not receive
                            a sales commission, which means we can't pay the cash back.</li>
                        <li>	<span>DO click through to the store from Extrabux.<span class="Apple-converted-space">&nbsp;</span></span>Clicking
                            to Extrabux from other websites or typing the store's website directly
                            into your web browser without going through Extrabux will invalidate your
                            cash back. Make sure that you don't click any other links to the store's
                            website after clicking through from Extrabux. If you place an order at
                            a store's website but forgot to click through Extrabux first, your order
                            is not eligible for...

SCSS

/* -----------------------------------*/

/* ----------->>> FAQ <<<--------*/

/* -----------------------------------*/
 #faqPage {
    font-size: 14px;
    line-height: 150%;
    .faq-search.input-wrapper {
        display: block;
        #deskSupportCenterSearch {
            @include inlineBlockForOldBrowsers;
            border: 1px solid #CCC;
            @include modernField;
            width: 250px;
            margin-bottom: 10px;
        }
        #deskSupportCenterSearch, label {
            font-size: 14px;
            padding: 3px 5px 5px 5px;
        }
    }
    .noResults {
        display: none;
        margin-top: 10px;
    }
    .section {
        font-size: 18px;
        font-weight: bold;
        margin: 30px 0 15px 0;
    }
    .popular {
        background: lightYellow;
        padding: 15px;
        margin-top: 15px;
        border: 1px solid #CCC;
        @include rounded;
        @include inlineBlockForOldBrowsers;
        .section {
            margin-top: 0;
        }
    }
    .question {
        color: green;
        margin-bottom: 5px;
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
    .answer {
        display: none;
        margin-bottom: 15px;
        margin-left: 15px;
        .answerContent {
            a {
                text-decoration: underline;
            }
        }
        ul {
            list-style-type: disc;
            padding-left: 40px;
            li {
                padding-bottom: 5px;
                span {
                    font-weight: bold;
                }
            }
        }
    }
    .popularity {
        font-size: .9em;
        margin-top: 5px;
        border-top: 1px dotted #CCC;
        .questionLink {
            float: right;
        }
    }
    .smiley {
        font-size: 18px;
    }
    .desk_article {
        background: white;
        border: 1px solid #CCC;
        @include rounded;
        font-size: 14px;
        padding: 20px;
 ...

JavaScript

$.fn.replaceText = function (search, replace, text_only) {
    //http://stackoverflow.com/a/13918483/470749
    return this.each(function () {
        var v1, v2, rem = [];
        $(this).find("*").andSelf().contents().each(function () {
            if (this.nodeType === 3) {
                v1 = this.nodeValue;
                v2 = v1.replace(search, replace);
                if (v1 != v2) {
                    if (!text_only && /<.*>/.test(v2)) {
                        $(this).before(v2);
                        rem.push(this);
                    } else {
                        this.nodeValue = v2;
                    }
                }
            }
        });
        if (rem.length) {
            $(rem).remove();
        }
    });
};

function replaceParentsWithChildren(parentElements) {
    parentElements.each(function () {
        var parent = this;
        var grandparent = parent.parentNode;
        $(parent).replaceWith(parent.childNodes);
        grandparent.normalize();
    });
}

function highlightQuery(query, highlightClass, targetSelector, selectorToExclude) {
    replaceParentsWithChildren($('.' + highlightClass)); //Remove old highlight wrappers.
    $(targetSelector).replaceText(new RegExp(query, "gi"), function (match) {
        return '<span class="' + highlightClass + '">' + match + "</span>";
    }, false);
    replaceParentsWithChildren($(selectorToExclude + ' .' + highlightClass)); //Do not highlight children of this selector.
}


//Irrelevant stuff:
$(document).ready(function(){
$('#deskSupportCenterSearch').bind('change keyup', function () {
    //Reset to baseline:
    var sectionSelector = '#faqPage.content .section';
    $('.popular, .articleRow, ' + sectionSelector).show();
    $('.noResults').hide();
    //Do the filter:
    var query = $(this).val();
    var selectorToExclude = '.popularity';
    if (query) {
        $('.articleRow').each(function () {
            var content = $(this).clone();
           ...