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 v3.4. It is responsive.

Input

Author Nick Girga

Tailwind v3.4 1.2k 4

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

beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.5k
Form with multiple Inputs.

JUGENDRA GANGWAR

2 months ago

436
Range slider
Range slider with upper limit and lower limit.

Alok

4 years ago

13.1k
Checkbox button
press the button to check

Anonymous

2 years ago

5.4k
File input field

Lyra Ravensong

3 years ago

14.1k
todo list with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

2.3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k
Profile Form
Profile form for taking user inputs

TailwindFlex

4 years ago

15.4k
File input

Anonymous

2 years ago

8.2k
Payment Form

ABDO-SY

1 year ago

2.4k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

Maxim

1 year ago

2.8k