How to create Google's Input Field with Tailwind?

const inputClasses = {
  root: /*tw:*/ `group relative h-14 w-full rounded-md border border-[#a5a5a6] focus-within:border-primary focus-within:ring-1 focus-within:ring-primary`,
  label: /*tw:*/ `absolute left-2 top-1/2 z-0 -translate-y-1/2 bg-white px-1 text-base pointer-events-none duration-200 group-focus-within:top-0 group-focus-within:text-xs group-focus-within:text-primary`,
  input: /*tw:*/ `z-10 h-full w-full rounded-md px-3.5 py-4 outline-none`,
};

function Input({ placeholder, ...props }: React.ComponentProps<'input'>) {
  return (
    <div className={inputClasses.root}>
      <label
        className={cnMerge([inputClasses.label, props.value && 'top-0 text-xs'])}
        htmlFor={props.id ?? props.name}
      >
        {placeholder}
      </label>
      <input id={props.id ?? props.name} {...props} className={inputClasses.input} />
    </div>
  );
}