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

360

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

Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

8.7k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

3.9k
login
html , css

Author:
Hacker Development

5 months ago

383
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Author:
Nick Girga

5 months ago

415
Textarea

Author:
Ron Hicks

2 years ago

12.1k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

7 months ago

626
Sign in / Login Form

Author:
Bunny

3 years ago

13.5k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

6 months ago

404
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

2 years ago

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

Author:
Maxim

11 months ago

1.6k
File Upload
Image or file upload card

Author:
Khalid

1 year ago

3.4k
Range Slider

Author:
Alok

3 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components