Float Input Placeholder Example With Tailwind CSS

If you want to add a little more visuality to our input, we can use float placeholder. Here is an example written with Tailwind CSS.

float input placeholder example with tailwind css gif

<div class="relative">
  <input
    id="password"
    type="password"
    placeholder=""
    class="peer bg-black bg-opacity-50 px-4 pt-6 pb-2 w-full rounded border border-slate-600 text-white focus:ring-2 focus:ring-white outline-none invalid:border-red-500"
  />
  <label
    for="password"
    class="absolute text-slate-400 left-3 scale-75 top-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-4 peer-focus:scale-75 peer-focus:top-2 duration-300"
  >
    Password
  </label>
</div>

If you want to use it in React, there is an example usage below.

import { ComponentPropsWithoutRef } from "react";

type InputProps = ComponentPropsWithoutRef<"input"> & {
  label: string;
};

function Input({ label, type }: InputProps) {
  return (
    <div className="relative">
      <input
        id={label}
        type={type}
        placeholder=""
        className="peer bg-black bg-opacity-50 px-4 pt-6 pb-2 w-full rounded border border-slate-600 text-white focus:ring-2 focus:ring-white outline-none invalid:border-red-500"
      />
      <label
        htmlFor={label}
        className="absolute text-slate-400 left-3 scale-75 top-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:top-4 peer-focus:scale-75 peer-focus:top-2 duration-300"
      >
        {label}
      </label>
    </div>
  );
}

export default Input;