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
Industrial_Farming_Cards_Component
Un ensemble de cartes réactives avec une esthétique industrielle et de matières premières, des couleurs neutres chaudes et un support en mode sombre, adapté à l’agriculture et aux sites Web agricoles. Comprend des éléments apparents et un design utilitaire.
Luxury_Sepia_SaaS_Cards_Component
Un composant de cartes complexe et réactif avec un style de design luxueux/premium, une palette de couleurs sépia/marron, optimisé pour les applications technologiques/SaaS, y compris la prise en charge du mode sombre et des éléments interactifs.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.