Input Field
A flexible input field component for React and Tailwind CSS with support for labels, icons, helper text and error states. Drop it into any form and style it to match your brand.
We'll never share it.
Copy the code
export function InputField() {
return (
<label className="block w-60 text-white">
<span className="text-sm text-white/70">Email</span>
<input type="email" placeholder="you@company.com"
className="mt-1.5 w-full rounded-lg border border-violet-500/50 bg-white/5
px-3 py-2.5 text-sm outline-none focus:border-violet-400" />
<span className="mt-1.5 block text-xs text-white/45">We'll never share it.</span>
</label>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the input field
This input field is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.