Highlight the text in image using tesseract.js

Question

I came across this awesome feature in mobbin.com which highlights the given text in the image. I guess they are using Tesseract.js (Not sure).

Here is their changelog (If it's relevant)

I'm sure they are using RadixUI, TailwindCSS. But not sure about the part how the highlight is done.

It's kind of overlay above the text.

<div class="relative overflow-hidden bg-bg-secondary after:absolute after:inset-0 after:rounded-[--border-radius] after:shadow-image-inset" style="position: absolute; inset: 0px; --border-radius: 30.869999999999997px; border-radius: 30.87px;">

<img crossorigin="anonymous" src="https://upcdn.io/FW25bBB/image/content/app_screens/e8d025b3-982a-45c6-b8c6-946fef3446f9.png?f=webp&amp;w=1920&amp;q=85&amp;fit=shrink-cover&amp;extend-bottom=120&amp;image=%2Fwatermark%2Fff806217-a840-497f-a23e-90760ae3aa1e&amp;gravity=bottom" alt="Vivid screen" class="h-full w-full object-cover object-top">

<span class="absolute bg-[#FFE500]/30 shadow rounded-4" style="inset: 36.5023% 56.9975% 60.7199% 29.3469%;"></span>

<span class="absolute bg-[#FFE500]/30 shadow rounded-4" style="inset: 36.5023% 38.3376% 60.4069% 41.2214%;"></span>

</div>

Those span tags is setting the yellow highlight.

Any Idea how this can be done in React or Nextjs.