text input with animated underline in tailwind

gistfile1.txt

        <div className="relative">
          <input
            type="text"
            ref={inputRef}
            placeholder="flaborger the shenonions..."
            className="peer relative z-10 focus:outline-none"
            size={24}
          />
          {/* Animated underline */}
          <span
            className={`absolute bottom-0 left-0 z-0 inline-block h-[1.5px] w-full ${error ? "bg-danger-500" : "bg-text-muted"} align-bottom`}
          />
          <span className="absolute right-0 bottom-0 z-1 inline-block h-[1.5px] w-0 bg-text align-bottom transition-[width] ease-out peer-focus:left-0 peer-focus:w-full" />
        </div>