1<div class="w-72 rounded-2xl border border-violet-500/30 bg-white/5 p-6 backdrop-blur">2 <span class="inline-block rounded-full bg-violet-500/15 px-3 py-1 text-xs font-medium text-violet-300">Pro</span>3 <div class="mt-4 flex items-end gap-1"><span class="text-4xl font-bold text-white">9€</span><span class="mb-1 text-sm text-white/50">/Monat</span></div>4 <ul class="mt-5 space-y-2 text-sm text-white/70">5 <li class="flex items-center gap-2"><span class="text-cyan-400">✓</span> Unbegrenzte Projekte</li>6 <li class="flex items-center gap-2"><span class="text-cyan-400">✓</span> Alle Komponenten</li>7 <li class="flex items-center gap-2"><span class="text-cyan-400">✓</span> Priorisierter Support</li>8 </ul>9 <button class="mt-6 w-full rounded-xl bg-gradient-to-r from-violet-600 to-cyan-500 py-2.5 font-semibold text-white transition hover:brightness-110">Wählen</button>10</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.