Composant d’affichage des prix
Un composant d’affichage des prix simple et épuré avec une esthétique monospace/développeur et une palette de couleurs rétro/vintage, conçu pour les données météorologiques/climatiques.
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">°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17°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>Composants associés
Composant d’affichage des prix
Un composant d’affichage des prix réactif pour un tableau de bord, avec des micro-interactions attrayantes et une palette de couleurs triadique, avec prise en charge du mode sombre.
Composant d’affichage des prix
Un composant d’affichage des prix sur le thème rétro/vintage pour le e-commerce, avec une palette de couleurs triadique. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, construit avec Tailwind CSS.
Composant d’affichage des prix 22
Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.