DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to create Google's Input Field with Tailwind?
Gabriel Linassi
Gabriel Linassi

Posted on

How to create Google's Input Field with Tailwind?

Image description

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›