Okay, I'm trying to build some small tricks in tailwindcss version 3. In version 3 tailwindcss introduce Pseudo-elements before & after. So, let's check it. here is the output of the design 👇

Now let's jump to the code </>

<div>
  <h4 class="relative z-10 inline-block px-1 font-semibold uppercase after:absolute after:-bottom-2 after:right-0 after:-z-10 after:h-2 after:w-full after:-translate-y-2 after:bg-[#f1cdc2] after:content-['']">Techwolf</h4>
</div>

You can also find the design in Tailwind Play