Help Replicating a Cool Input Field Effect in UnoCSS

[authcompanion]

Hello! Looking for community help, and would be grateful for your time.

I'm looking to replicate, using unocss, this input field effect called "With Floating Label (Inside)" as shown here: https://www.hyperui.dev/components/application-ui/inputs#component-6

So far, its been unsuccessful - here is the UnoCSS Playground link with my attempt: here

Expected
Like in the example on https://www.hyperui.dev/, when you click the input field, the label shifts up.

Actual (as shown in the playground)
When you click the input field, the label stays the same. It's only on type within the input field, that the label then shifts up.

Any advice on replicating this? Thanks for the review.