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

681

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

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

Author:
Samuel Dawson

3 years ago

17.9k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

6.2k
Material 3 Text Fields [Light]
Text fields that conform to Google's Material 3 design guidelines. Can be used for single-line text fields as well as textareas.

Author:
Nick Girga

8 months ago

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

Author:
Ameth Galarcio

1 year ago

4.3k
File upload

Author:
Laurits

2 years ago

12.7k
Single Input newsletter form

Author:
Task Master

3 years ago

10.7k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

5 months ago

563
Login Form with Icon

Author:
Akai

4 months ago

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

Author:
Anonymous

2 years ago

9.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2.1k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components