CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine komplexe, reaktionsschnelle Preisanzeigekomponente für ein Dashboard mit Unterstützung für dunkle Themen, die Tailwind CSS in einem minimalistischen Graustufen-Flat-Design verwendet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
  </div>
  <div class="flex items-center mb-6">
    <div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
    <div class="flex items-center ml-4">
      <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
      <span class="text-lg font-semibold text-green-500">+1.23%</span>
    </div>
  </div>
  <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
    <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
    <div class="flex space-x-4">
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Cyberpunk-Komponente für die Preisanzeige

Eine reaktionsschnelle Preisanzeigekomponente für Beratung/Dienstleistungen mit einer Cyberpunk-, futuristischen Neon-Ästhetik. Verfügt über dunkle Hintergründe, helle analoge Akzentfarben und unterstützt 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

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