3D_Muted_Gallery_Component
3D 디자인 미학, 차분한 색 구성표 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 갤러리 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.
HTML 코드
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 leading-tight tracking-tight drop-shadow-lg">
<span class="block">Explore Our Depth Gallery</span>
<span class="block text-2xl sm:text-3xl font-medium text-gray-500 dark:text-gray-400 mt-2">Showcasing Stories Through Immersive Visuals</span>
</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Gallery Item 1 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/1018/600/400" alt="Forest Stream" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">The Whispering Woods</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A journey into the heart of an ancient forest, where tranquility reigns and secrets are whispered by the wind.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>JohnDoe / Oct 26, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500/30 to-purple-500/30 dark:from-indigo-800/30 dark:to-purple-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"Nature's beauty reflects the soul's serenity. This captures the essence of a quiet, reflective escape."</p>
</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/1040/600/400" alt="Abstract Cityscape" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Urban Echoes</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Discovering the silent stories woven into the bustling fabric of the concrete jungle, where past meets future.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>JaneDoe / Nov 01, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/30 to-cyan-500/30 dark:from-blue-800/30 dark:to-cyan-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"The city breathes. Every shadow and light tells a tale of human endeavor, captured in this mesmerizing view."</p>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/1025/600/400" alt="Snowy Mountain" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Summit's Silence</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ascending to the peaks, where the air is thin and the silence speaks volumes of nature's grandeur.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>WillSmith / Oct 19, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-gray-500/30 to-slate-500/30 dark:from-gray-800/30 dark:to-slate-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"Majesty unleashed. The mountains stand as eternal guardians of time, inspiring awe and humility."</p>
</div>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/1084/600/400" alt="Rainy City Street" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Reflective Puddles</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">The rain-soaked streets mirror the sky, creating a calming, introspective view of urban life.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>EmilyClark / Nov 05, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-lime-500/30 dark:from-teal-800/30 dark:to-green-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"Even in the downpour, there is beauty. The world reflects itself, showing depth in every drop."</p>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/105/600/400" alt="Desert Landscape" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Sands of Time</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">The vast, ancient desert whispers tales of endurance and the timeless beauty of arid landscapes.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/women/76.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>SarahLee / Oct 29, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500/30 to-orange-500/30 dark:from-yellow-800/30 dark:to-orange-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"Endless skies meet ancient Earth. The desert's story is one of unwavering spirit and profound peace."</p>
</div>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="relative group perspective-1000">
<div class="relative transform-style-preserve-3d transition-transform duration-700 ease-in-out hover:rotate-y-10 hover:shadow-2xl dark:hover:shadow-gray-700/50 rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl dark:shadow-gray-950/70 block">
<div class="relative z-10 p-5 backface-hidden">
<img src="https://picsum.photos/id/1069/600/400" alt="Northern Lights" class="w-full h-48 object-cover rounded-md mb-4 shadow dark:shadow-gray-700/30 group-hover:scale-105 transition-transform duration-300">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Aurora Dreams</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Witness the celestial dance of pure light across the polar skies, a truly ethereal experience.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
<img src="https://randomuser.me/api/portraits/men/65.jpg" alt="Author Avatar" class="w-7 h-7 rounded-full mr-2 shadow-sm">
<span>MichaelB / Nov 08, 2023</span>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/30 to-pink-500/30 dark:from-purple-800/30 dark:to-pink-800/30 rounded-xl backface-hidden rotate-y-180 flex items-center justify-center p-6 text-gray-800 dark:text-gray-200 text-center text-sm font-medium leading-relaxed opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p>"Where colors dance and silence reigns. The sky becomes a canvas, painting dreams across the vast dark."</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Essential for 3D transforms to work correctly */
.perspective-1000 {
perspective: 1000px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
</style>관련 구성 요소
갤러리 구성 요소
소셜 미디어 목적을 위해 스큐어모피즘 디자인, 파스텔 색 구성표 및 중간 정도의 복잡성과 함께 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소입니다. 다크 모드 지원이 포함되며 이미지에는 picsum.photos를, 아바타에는 randomuser.me 를 사용합니다.
갤러리 구성 요소
소셜 미디어를 위한 마이크로 인터랙션이 있는 반응형 갤러리 구성 요소로, Tailwind CSS를 사용하여 어두운 테마와 간단한 레이아웃으로 설계되었습니다.