CCHub Logo CCHub Tailwind Collection
Komponenten Preisauszeichnung Komponente "Preisanzeige"

Komponente "Preisanzeige"

Eine einfache, saubere Preisanzeigekomponente mit einer Monospace-/Entwickler-Ästhetik und einer Retro-/Vintage-Farbpalette, die für Wetter-/Klimadaten entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="w-full max-w-sm rounded-lg shadow-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 overflow-hidden">
    <div class="flex justify-between items-center bg-blue-200 dark:bg-blue-900 p-3 border-b border-gray-300 dark:border-gray-700">
      <span class="text-blue-800 dark:text-blue-200 text-sm font-semibold uppercase tracking-wider">[ METEO REPORT ]</span>
      <span class="text-gray-600 dark:text-gray-400 text-xs">ONLINE</span>
    </div>
    <div class="p-4 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">CURRENT TEMPERATURE</p>
      <div class="flex items-baseline justify-center mb-3">
        <span class="text-5xl md:text-6xl font-bold text-teal-600 dark:text-teal-400">18</span>
        <span class="text-2xl text-teal-600 dark:text-teal-400">&deg;C</span>
      </div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17&deg;C ]</p>
      <div class="text-left space-y-1 text-sm md:text-base">
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">HUMIDITY:</span> <span class="text-purple-600 dark:text-purple-400">65%</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">WIND SPD:</span> <span class="text-purple-600 dark:text-purple-400">12 KM/H</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">PRESSURE:</span> <span class="text-purple-600 dark:text-purple-400">1012 HPA</span></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-blue-800 p-3 pt-2 text-xs border-t border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300">
      <p class="flex justify-between"><span class="text-blue-700 dark:text-blue-300">STATUS:</span> <span class="text-green-600 dark:text-green-400">CLEAR SKIES</span></p>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Preisanzeige"

Eine Komponente zur Preisanzeige im Retro-/Vintage-Stil für den E-Commerce mit einem triadischen Farbschema. Es handelt sich um ein komplexes, responsives Design mit Unterstützung für dunkle Themen, das mit Tailwind CSS erstellt wurde.

Offen

Preisanzeige Komponente 22

Eine minimalistische Komponente zur Preisanzeige, die das Bild, den Namen, den Preis und eine Schaltfläche eines Produkts präsentiert, die in den Warenkorb gelegt werden kann. Entwickelt mit Reaktionsfähigkeit und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

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.

Offen