Ein Preistabellen-Bereich (Pricing Table), der speziell für SaaS-Plattformen und Abonnementdienste konzipiert wurde, um Nutzern die verschiedenen Tarife transparent und ansprechend zu präsentieren. Das Design stellt drei Tarifoptionen übersichtlich nebeneinander und hebt den empfohlenen Tarif (z. B. den Pro-Plan) optisch gezielt hervor.
Der beste Plan für Ihr Unternehmen
Alle Pläne beinhalten eine 14-tägige kostenlose Testversion. Jederzeit kündbar.
Ideal für persönliche Projekte und kleine Teams.
1 Projekt
Basic Support
10 GB Speicherplatz
Beliebtestes
Der perfekte Plan für wachsende Teams und Unternehmen.
Unbegrenzte Projekte
Priority Support
100 GB Speicherplatz
Erweiterte Analysen
Maßgeschneidert für große Organisationen und hohe Anforderungen.
Alles unbegrenzt
Rund-um-die-Uhr dedizierter Support
Benutzerdefinierter Speicherplatz
SLA-Garantie
<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
<p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
Der beste Plan für Ihr Unternehmen
</p>
<p class="mt-4 text-xl text-gray-500">
Alle Pläne beinhalten eine 14-tägige kostenlose Testversion. Jederzeit kündbar.
</p>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
<!-- Basic Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
<span class="text-gray-500 ml-2">/Monat</span>
</div>
<p class="text-gray-500 mb-8">Ideal für persönliche Projekte und kleine Teams.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
1 Projekt
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Basic Support
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
10 GB Speicherplatz
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
Loslegen
</button>
</div>
<!-- Pro Plan (Highlighted) -->
<div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
<div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
Beliebtestes
</div>
<h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-white">¥4,980</span>
<span class="text-blue-200 ml-2">/Monat</span>
</div>
<p class="text-blue-100 mb-8">Der perfekte Plan für wachsende Teams und Unternehmen.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Unbegrenzte Projekte
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Priority Support
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
100 GB Speicherplatz
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Erweiterte Analysen
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
Kostenlose Testversion starten
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
<div class="flex items-baseline mb-6">
<span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
<span class="text-gray-500 ml-2">/Monat</span>
</div>
<p class="text-gray-500 mb-8">Maßgeschneidert für große Organisationen und hohe Anforderungen.</p>
<ul class="space-y-4 mb-8">
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Alles unbegrenzt
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Rund-um-die-Uhr dedizierter Support
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Benutzerdefinierter Speicherplatz
</li>
<li class="flex items-center text-gray-600">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
SLA-Garantie
</li>
</ul>
<button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
Kontaktieren Sie uns
</button>
</div>
</div>
</div>
</div>Pro Plan (den meistgewählten Plan) bedient sich einer auffälligen Hintergrundfarbe und eines leichten Schwebeeffekts (transform md:-translate-y-4), um sofort die Aufmerksamkeit der Nutzer zu fesseln.grid-cols-1 md:grid-cols-3 passt sich die Struktur intelligent an: Auf Mobilgeräten reihen sich die Karten untereinander (einspaltig), auf Tablets und größeren Bildschirmen platzieren sie sich elegant nebeneinander (dreispaltig).hover:shadow-lg transition-shadow duration-300 versehen. Diese erzeugen beim Darüberfahren mit der Maus einen weichen Schatten, der Interaktivität und eine spürbare räumliche Tiefe vermittelt.