JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/ArcaneDigital/dataFilter.js/master/example/dataFilter.min.js"></script>

    <h2>Movies</h2>
    <button class="filter" data-attr="rating" data-value="">All</button>
    <button class="filter" data-attr="rating" data-value="G">G</button>
    <button class="filter" data-attr="rating" data-value="PG">PG</button>
    <button class="filter" data-attr="rating" data-value="R">R</button>
    <select class="filter" name="filterSelect">
    <option value="" data-attr="rating" data-value="">All</option>
    <option value="G" data-attr="rating" data-value="G">G</option>
    <option value="PG" data-attr="rating" data-value="PG">PG</option>
    <option value="R" data-attr="rating" data-value="R">R</option>
    </select>
    <section>
      <ul id="dataParent">
        <li data-rating='G'>Home Alone</li>
        <li data-rating='R'>Jaws</li>
        <li data-rating='R'>Nightmare on Elm Street</li>
        <li data-rating='PG-13'>Blind Side</li>
        <li data-rating='G'>Cars</li>
        <li data-rating='G'>Dora The Explorer</li>
        <li data-rating='PG'>Goonies</li>
      </ul>
    </section>

JavaScript

dataFilter.init({
         });