Home
Nick Girga
Elegant Textboxes

Elegant Textboxes

Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

This tailwind example is contributed by Nick Girga, on 02-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Nick Girga

Fork Fullscreen

<div class="flex flex-col items-center justify-center gap-4 my-16">

<input type="text" class="textbox" />

<div class="flex">
    <input id="textbox-0" class="peer textbox textbox-primary"
      placeholder="Primary"
      value="Example content"
      type="text"
    />
    <label for="textbox-0" class="textbox-label textbox-label-primary">
      Primary
    </label>
  </div>

<div class="flex">
    <input id="textbox-1" class="peer textbox textbox-secondary"
      placeholder="Secondary"
      type="text"
    />
    <label for="textbox-1" class="textbox-label textbox-label-secondary">
      Secondary
    </label>
  </div>

<div class="flex">
    <input id="textbox-2" class="peer textbox textbox-info"
      placeholder="Info"
      type="text"
    />
    <label for="textbox-2" class="textbox-label textbox-label-info">
      Info
    </label>
  </div>

<div class="flex">
    <input id="textbox-3" class="peer textbox textbox-success"
      placeholder="Success"
      type="text"
    />
    <label for="textbox-3" class="textbox-label textbox-label-success">
      Success
    </label>
  </div>

<div class="flex">
    <input id="textbox-4" class="peer textbox textbox-warn"
      placeholder="Primary"
      type="text"
    />
    <label for="textbox-4" class="textbox-label textbox-label-warn">
      Warn
    </label>
  </div>

<div class="flex">
    <input id="textbox-5" class="peer textbox textbox-error"
      placeholder="Primary"
      type="text"
    />
    <label for="textbox-5" class="textbox-label textbox-label-error">
      Error
    </label>
  </div>

<div class="flex">
    <input id="textbox-6" class="peer textbox w-[64mm] sm:w-[128mm] outline-red-300 focus:outline-green-400 text-blue-700"
      placeholder="Custom"
      type="text"
    />
    <label for="textbox-6" class="textbox-label text-orange-300 peer-focus:text-purple-300">
      Custom
    </label>
  </div>

</div>

Related Examples