Componentes Visualización de precios Componente de visualización de precios

Componente de visualización de precios

Un componente de visualización de precios simple y limpio con una estética monoespaciada/reveladora y una paleta de colores retro/vintage, diseñado para datos meteorológicos/climáticos.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de visualización de precios

Un componente de visualización de precios de estilo 3D que admite el modo oscuro y efectos responsivos, mostrando detalles de precios de productos.

Abrir

Componente de visualización de precios

Un componente de visualización de precios complejo diseñado en estilo skeuomórfico que imita elementos del mundo real, adecuado para blogs y consumo de contenido con un esquema de color triádico y un diseño receptivo con soporte para modo oscuro.

Abrir

Componente de visualización de precios

Un componente de visualización de precios simple y receptivo para listados de bienes raíces, con colores de tono tierra y soporte para modo oscuro.

Abrir