Karte mit weichem Rand-Glow beim Hover. Tailwind-Utility-Klassen, sofort einsetzbar.
1<div class="group relative w-72 rounded-2xl border border-white/10 bg-neutral-900 p-6 transition hover:border-amber-400/40">2 <div class="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition group-hover:opacity-100" style="background:radial-gradient(400px circle at 50% 0,rgba(245,166,35,.18),transparent 40%)"></div>3 <h3 class="text-lg font-semibold text-white">Elementa Pro</h3>4 <p class="mt-2 text-sm text-neutral-400">Effektreiche Komponenten, DSGVO-konform, kostenlos.</p>5 <button class="mt-4 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black">Mehr</button>6</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.
Eine interaktive Karte, die dem Mauszeiger mit einem weichen Lichtkegel folgt und so ein lebendiges Spotlight-Erlebnis auf dunklem Grund erzeugt.
Eine Glassmorphism-Karte mit einem Spotlight-Licht, das dem Mauszeiger folgt und den Rand zum Leuchten bringt.