CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine reaktionsschnelle Preisanzeigekomponente für ein Dashboard mit ansprechenden Mikrointeraktionen und einem triadischen Farbschema mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
  <div class="flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
    <div class="flex flex-col">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
    </div>
  </div>
  <div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
    <h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
    <p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
    <div class="mt-2 flex justify-between items-center">
      <button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
      <button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Neumorphe Preisanzeigekomponente

Eine komplexe, reaktionsschnelle und mit dem Dunkelmodus kompatible Preisanzeigekomponente mit einem Neumorphism-Designstil und einem analogen Farbschema, geeignet für den Konsum von Blogs/Inhalten. Verfügt über mehrere interaktive Elemente wie Umschalter und detaillierte Ebenen.

Offen

Komponente "Preisanzeige"

Preisanzeigekomponente mit Retro/Vintage-Ästhetik, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Preisanzeige"

Eine komplexe Preisanzeigekomponente, die im skeuomorphen Stil entworfen wurde, reale Elemente nachahmt, geeignet für Blogs und den Konsum von Inhalten mit einem triadischen Farbschema und responsivem Design mit Unterstützung des Dunkelmodus.

Offen