JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>


<div class="p-0 m-0">

                    <button data-dropdown-id="role_name-search" class="dropdown-button cursor-pointer hover:bg-gray-800 p-4 m-0 items-center justify-center border-l border-r border-gray-800 bg-eb-gray text-white processed">
                        Role <svg class="svg-inline--fa fa-angle-down border-l ml-2 border-gray-800 cursor-pointer shrink-0 w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path></svg><!-- <i class="fa-solid fa-angle-down border-l ml-2 border-gray-800 cursor-pointer shrink-0 w-10"></i> Font Awesome fontawesome.com -->
                    </button>

                    <div data-id="role_name-search" data-conflicts="action-menu" data-effect-on="animate__fadeInUp" data-effect-off="animate__fadeOutDown" class="animate__animated animate__faster z-25 bg-eb-dark z-50 absolute shadow-lg flex flex-col rounded-2xl border border-gray-800 m-4 pt-4 pb-4 animate__fadeInUp">
                        <div class="px-2 pb-2 text-sm text-body font-medium" aria-labelledby="dropdownInformationButton shadow-lg">
                            <div class="bg-neutral-primary-medium border-b border-gray-800 p-2 rounded-t-base pb-2 pl-4 pr-4 mb-4">
                                <label for="search" class="sr-only">Search</label>
                                <input type="text" id="search" class="table-filter-input bg-gray-800...

JavaScript

function myFunction() {

    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementByclassName("myInput");
    
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("button")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}