JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.8.nomodule.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanjs-ext@0.2.4/dist/van-x.nomodule.min.js"></script>

JavaScript

const {div, input, li, ul} = van.tags

const countries = [
  "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay",
  "Peru", "Suriname", "Uruguay", "Venezuela",
]

const filter = van.state("")
const filteredCountries = vanX.reactive([])
van.derive(() => vanX.replace(filteredCountries, () => countries.filter(
  c => c.toLowerCase().includes(filter.val.toLowerCase()))))

van.add(document.body,
  div(
    "Countries in South America. Filter: ",
    input({type: "text", value: filter, oninput: e => filter.val = e.target.value})
  ),
  vanX.list(ul, filteredCountries, v => li(v)),
)