4 Tailwind2 with JSPublished 2026-10-04Free · no sign-up
Six Tailwind form inputs: a floating label made with peer-placeholder-shown, a search field with a keyboard hint, default, error and success states, prefix and suffix add-ons, a textarea with a live counter and a password field with a Show button.
A floating label done entirely with Tailwind: the input is the peer, placeholder-shown: keeps the label large inside the field, and peer-focus: and the non-empty state lift it above. A single-space placeholder makes :placeholder-shown work.
A rounded search input with a leading magnifier icon and a keyboard shortcut hint on the right. The icon and the hint are positioned absolutely inside a relative wrapper, and the field keeps a visible label for screen readers with sr-only.
Default, error and success fields with matching hint text. The error field uses aria-invalid and the aria-[invalid=true]: variant for its red border, so the visual state always matches the state announced to assistive technology.
A price field with a currency prefix and a URL field with a domain suffix. The wrapper uses focus-within: to show the focus ring around the whole group, and the add-ons are styled spans that inherit the group's rounded corners.
A message box with a live character count in the corner, turning amber near the limit. The count is a polite live region, and the textarea uses resize-y so people can make it taller but the layout width never breaks.
View code
<div class="w-full max-w-sm">
<label for="twt" class="mb-1.5 block text-sm font-semibold text-slate-700">Note to the seller</label>
<div class="relative">
<textarea id="twt" rows="4" maxlength="160" aria-describedby="twc" class="w-full resize-y rounded-lg border border-slate-300 px-3 py-2.5 pb-7 text-[15px] text-slate-900 outline-none focus:border-teal-600 focus:ring-2 focus:ring-teal-100">Please wrap it as a gift.</textarea>
<span id="twc" aria-live="polite" class="absolute bottom-3 right-3 text-xs text-slate-500"></span>
</div>
</div>
const ta = document.getElementById('twt'), ct = document.getElementById('twc');
function upd() { const left = ta.maxLength - ta.value.length; ct.textContent = left + ' left'; ct.classList.toggle('text-amber-700', left <= 20); ct.classList.toggle('text-slate-500', left > 20); }
ta.addEventListener('input', upd); upd();
06. Tailwind Password with Toggle
TailwindAuth
A password field with an eye button that reveals the text. The button sits inside the field with absolute positioning, has an accessible name and aria-pressed, and the input keeps autocomplete="new-password" for password managers.
Put the label after the input, mark the input as peer and give it a single-space placeholder. peer-placeholder-shown: keeps the label large inside the empty field, and peer-focus: lifts it when the field is focused.
Error state from ARIA
The error field uses aria-invalid="true" and the aria-[invalid=true]: variant for its red border. Styling from the ARIA attribute guarantees the visual state matches what assistive technology announces.
Focus inside a group
For fields with add-ons, put the border on the wrapper and use focus-within: utilities so the ring surrounds the whole group when the input inside is focused.
Readable placeholders
Placeholder text often fails contrast checks. Use placeholder:text-slate-400 or darker on light fields, and never put instructions only in the placeholder.
Frequently asked questions
Which demos use JavaScript?
The textarea counter and the password toggle; the rest are pure Tailwind.
Do these use the forms plugin?
No. They style inputs directly with utilities, so no plugin is needed.
Can I use them with React or Vue?
Yes. Copy the markup and rename class to className in JSX.