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

687

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

Float Input

Author:
Maxim

2 years ago

4.3k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Maintenance mode

Author:
Maxim

2 years ago

4.3k
Toggle button

Author:
Matthew Chen

2 years ago

12.9k
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.9k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

10 months ago

901
Product Form - Reverie

Author:
S V

10 months ago

630
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

1 year ago

1.9k
Login Form with Icon

Author:
Prashant

3 years ago

18.3k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

219
Search input

Author:
Leon Bachmann

3 years ago

11k
Login form

Author:
Gopi Yadav

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components