Composant de galerie météo ludique
Un composant de galerie réactif et ludique pour les données météorologiques ou climatiques, avec des éléments arrondis, des couleurs sourdes et la prise en charge du mode sombre. Affiche des images liées à la météo avec des descriptions.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-6 lg:mb-8 text-center drop-shadow-lg">
Climate Chronicles
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 sm:mb-10 text-center max-w-3xl mx-auto">
Explore fascinating moments and phenomena from our planet's diverse weather patterns.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Gallery Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-blue-500/50 group">
<img src="https://picsum.photos/id/1043/600/400" alt="Sunny Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Golden Hour Sunshine</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A perfect end to a warm summer day, with clear skies and a gentle breeze.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM5 9a1 1 0 011-1h1a1 1 0 110 2H6a1 1 0 01-1-1zm5-1a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm4 1a1 1 0 011 1v1a1 1 0 11-2 0V9a1 1 0 011-1z"></path></svg>
<span>Temperature: 28°C</span>
</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-emerald-500/50 group">
<img src="https://picsum.photos/id/1025/600/400" alt="Rainy Day" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Tranquil Downpour</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Gently falling rain brings life to the parched earth, a soothing natural symphony.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.727 6.42a1 1 0 00-.707-.293H15.5l.454-1.362A1 1 0 0015 4H5a1 1 0 00-.954 1.362L4.5 6.127H2.98a1 1 0 00-.707.293 1 1 0 00-.293.707v7.506a1 1 0 00.293.707 1 1 0 00.707.293h14.04a1 1 0 00.707-.293 1 1 0 00.293-.707V7.127a1 1 0 00-.293-.707zM15 14H5V6h10v8z" clip-rule="evenodd"></path></svg>
<span>Humidity: 90%</span>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-purple-500/50 group">
<img src="https://picsum.photos/id/1018/600/400" alt="Cloudy Sky" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Whispering Clouds</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">A canvas of soft clouds stretches across the sky, promising a calm day.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14 10a4 4 0 11-8 0 4 4 0 018 0z"></path><path fill-rule="evenodd" d="M7.002 9.043l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414zM12.998 9.043l1.42-1.42a1 1 0 011.414 0l1.42 1.42a1 1 0 010 1.414l-1.42 1.42a1 1 0 01-1.414 0l-1.42-1.42a1 1 0 010-1.414zM10 3a1 1 0 00-1 1v1a1 1 0 102 0V4a1 1 0 00-1-1zM10 15a1 1 0 00-1 1v1a1 1 0 102 0v-1a1 1 0 00-1-1zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm15 0a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1z"></path></svg>
<span>Cloud Cover: 75%</span>
</div>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-rose-500/50 group">
<img src="https://picsum.photos/id/1019/600/400" alt="Foggy Morning" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mystic Morning Mist</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The world awakens cloaked in a serene veil of morning fog.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 6a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zM7 14a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<span>Visibility: Low</span>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-sky-500/50 group">
<img src="https://picsum.photos/id/1/600/400" alt="Clear Sky with Mountains" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Mountain Breezes</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">Crisp air and panoramic views under an endless clear blue sky.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M6.293 6.707a1 1 0 010-1.414L9 2.586V13a1 1 0 11-2 0V6.586L4.707 9.293a1 1 0 11-1.414-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 6.586V13a1 1 0 11-2 0V6.586L6.293 6.707z" clip-rule="evenodd"></path></svg>
<span>Wind Speed: 15 km/h</span>
</div>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl dark:hover:shadow-pink-500/50 group">
<img src="https://picsum.photos/id/1084/600/400" alt="Sunset" class="w-full h-48 sm:h-56 object-cover rounded-t-2xl group-hover:opacity-90 transition duration-300">
<div class="p-5 sm:p-6">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">Vivid Sunset Hues</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed mb-4">The sky ablaze with colors as the sun dips below the horizon.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg class="w-5 h-5 mr-2 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm3 3a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
<span>UV Index: Low</span>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Galerie de Luxe
Un composant de galerie élégant et sophistiqué conçu pour les plateformes musicales et audio, avec des neutres chauds, des mises en page réactives et la prise en charge du mode sombre.
Composant Galerie 3D
Un composant de galerie 3D réactif complexe conçu pour le commerce électronique, avec un thème sombre et une palette de couleurs complémentaire.
Composant Galerie
Un composant de galerie réactif avec des micro-interactions pour les médias sociaux, conçu avec un thème sombre et une mise en page simple à l’aide de Tailwind CSS.