Preistabelle (Pricing Table)

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.

Vorschau und Code

Pricing

Der beste Plan für Ihr Unternehmen

Alle Pläne beinhalten eine 14-tägige kostenlose Testversion. Jederzeit kündbar.

Basic

¥1,980/Monat

Ideal für persönliche Projekte und kleine Teams.

1 Projekt
Basic Support
10 GB Speicherplatz

Beliebtestes

Pro

¥4,980/Monat

Der perfekte Plan für wachsende Teams und Unternehmen.

Unbegrenzte Projekte
Priority Support
100 GB Speicherplatz
Erweiterte Analysen

Enterprise

¥14,800/Monat

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>

Design- und UX-Punkte

Visuelle Hervorhebung: Die Karte für den 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.
Responsives Layout: Durch den CSS-Grid-Einsatz mit 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).
Interaktive Hover-Effekte: Jede Karte ist mit Klassen wie 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.
Barrierefreiheit (Accessibility): Die Farbgestaltung achtet auf starke Kontrastverhältnisse. Das Zusammenspiel aus klaren Icons und prägnanten Texten stellt sicher, dass die Tarifinformationen visuell eindeutig und leicht verständlich präsentiert werden.