CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine komplexe Preisanzeigekomponente im Retro-Vintage-Stil für Portfolios mit einem triadischen Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten.

Vorschau

HTML-Code 

<div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
  <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
      <p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
    </div>
    <div class="text-center mb-8">
      <p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
    </div>
    <ul class="mb-8 space-y-4">
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Unlimited Projects
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        10GB Storage
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        Custom Domain
      </li>
      <li class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        24/7 Support
      </li>
    </ul>
    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
      Get Started
    </button>
  </div>
</div>

Verwandte Komponenten

Komponente "Preisanzeige"

Eine Preisanzeigekomponente im 3D-Stil, die den Dunkelmodus und reaktionsschnelle Effekte unterstützt und Produktpreisdetails anzeigt.

Offen

Komponente "Preisanzeige"

Eine Preisanzeigekomponente im Neumorphism-Stil mit komplementärem Farbschema (sanftes Orange und Hellblau), moderate Komplexität für den E-Commerce. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen. Die Komponente zeigt ein Produktbild, einen Titel und einen Preis mit der Schaltfläche "In den Warenkorb" an. Im Dunkelmodus werden entsättigte Komplementärfarben verwendet.

Offen

Komponente "Preisanzeige"

Eine reaktionsschnelle Preisanzeigekomponente im Retro-/Vintage-Stil und lebendigen Farben, geeignet für Social-Media-Schnittstellen mit Unterstützung für den Dunkelmodus.

Offen