Composant des cartes météo Bauhaus
Un composant simple et réactif des cartes météo/climat inspiré des principes de conception du Bauhaus, avec des formes géométriques et une palette de couleurs triadique. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
<div class="container max-w-7xl grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Today's Weather Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-red-500 dark:border-red-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Today</h2>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">28°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Sunny with scattered clouds</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 65%
</div>
<div>
<span class="font-semibold block">Wind:</span> 12 km/h NE
</div>
<div>
<span class="font-semibold block">UV Index:</span> Low
</div>
<div>
<span class="font-semibold block">Precip:</span> 0%
</div>
</div>
</div>
<div class="px-6 py-3 bg-yellow-500 dark:bg-yellow-600 text-sm font-semibold text-white uppercase text-center">
Current Conditions
</div>
</div>
<!-- Tomorrow's Forecast Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-blue-500 dark:border-blue-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Tomorrow</h2>
<p class="text-4xl font-extrabold text-red-600 dark:text-red-400 mb-4">25°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Partly cloudy, chance of showers</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 78%
</div>
<div>
<span class="font-semibold block">Wind:</span> 15 km/h NW
</div>
<div>
<span class="font-semibold block">UV Index:</span> Moderate
</div>
<div>
<span class="font-semibold block">Precip:</span> 30%
</div>
</div>
</div>
<div class="px-6 py-3 bg-red-500 dark:bg-red-600 text-sm font-semibold text-white uppercase text-center">
Expected Forecast
</div>
</div>
<!-- Day After Tomorrow's Forecast Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Fri, May 24</h2>
<p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">22°C</p>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Mostly cloudy, few showers</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
<div>
<span class="font-semibold block">Humidity:</span> 85%
</div>
<div>
<span class="font-semibold block">Wind:</span> 10 km/h W
</div>
<div>
<span class="font-semibold block">UV Index:</span> Low
</div>
<div>
<span class="font-semibold block">Precip:</span> 60%
</div>
</div>
</div>
<div class="px-6 py-3 bg-blue-500 dark:bg-blue-600 text-sm font-semibold text-white uppercase text-center">
Long Range Outlook
</div>
</div>
<!-- Climate Data Card (Example with Placeholder Image) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-green-500 dark:border-green-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
<img src="https://picsum.photos/400/250?random=1" alt="Climate Data Visualization" class="w-full h-40 object-cover border-b-4 border-green-500 dark:border-green-600 group-hover:scale-105 transition duration-300" loading="lazy">
<div class="p-6 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Climate Trends</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Analyzing global temperature shifts</p>
</div>
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-400">
<p class="font-semibold">Average Anomaly:</p>
<p class="mb-2">+0.85°C (past decade)</p>
<p class="font-semibold">CO2 Levels:</p>
<p>420 ppm (rising)</p>
</div>
</div>
<div class="px-6 py-3 bg-green-500 dark:bg-green-600 text-sm font-semibold text-white uppercase text-center">
Environmental Impact
</div>
</div>
</div>
</div>Composants associés
Composant Cartes
Un composant de cartes complexe conçu pour le mode sombre, adapté à la consommation de blogs et de contenu avec une palette de couleurs triadique.
Composant Cartes
Un composant de cartes au design minimaliste et plat pour les systèmes de réservation, avec une palette de couleurs arc-en-ciel dégradée. Il est réactif, inclut la prise en charge du mode sombre et utilise des éléments simples pour un look épuré.
Composant Cartes 3D
Un composant de carte réactif avec un style de conception 3D, des couleurs vives et plusieurs éléments interactifs, adapté à un tableau de bord. Il prend en charge le mode sombre en utilisant le préfixe sombre de Tailwind.