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

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"

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

Komponente "Preisanzeige"

Eine 3D-inspirierte Preisanzeigekomponente mit monochromatischem Farbschema, die für Social-Media-Schnittstellen entwickelt wurde. Es handelt sich um eine komplexe, reaktionsschnelle Komponente mit Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde. Es ist kein JavaScript enthalten.

Offen