Glow on Focus Input
CSSTextfeld mit weichem, mehrschichtigem Leuchten in Fuchsia und Violett beim Fokussieren. Das Glühen lenkt die Aufmerksamkeit dezent auf das aktive Feld im dunklen Layout.
1<div class="w-72">2 <label class="mb-1.5 block text-sm font-medium text-white/70">Benutzername</label>3 <input type="text" placeholder="z. B. belkis" class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white outline-none transition placeholder:text-white/40 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/30" />4</div>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Hinweis: Diese Komponente nutzt Tailwind-Utility-Klassen. Stelle sicher, dass Tailwind in deinem Projekt eingebunden ist — per npx tailwindcss oder CDN cdn.tailwindcss.com (nur für Prototypen).
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.