장난기 넘치는 날씨 갤러리 구성 요소
날씨 또는 기후 데이터를 위한 반응형이고 재미있는 갤러리 구성 요소로, 둥근 요소, 차분한 색상 및 다크 모드 지원을 특징으로 합니다. 설명과 함께 날씨 관련 이미지를 표시합니다.
HTML 코드
<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>