Entertainment Grid Layout 구성 요소
엔터테인먼트 및 미디어 플랫폼을 위한 Swiss/International Typography에서 영감을 받은 깔끔하고 미니멀한 그리드 레이아웃입니다. 트라이어딕 색 구성표, 반응성 및 다크 모드 지원이 특징입니다.
HTML 코드
<div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
<div class="container mx-auto">
<div class="mb-8 text-center">
<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
Featured Entertainment
</h2>
<p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
Explore our curated selection of movies, shows, and more.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Item 1 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
<a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
<a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
<a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 5 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
<!-- Item 6 -->
<div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
<img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
<div class="p-4">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
<div class="flex justify-between items-center">
<span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
<a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now →</a>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
FinancialGridWithInteractions (영어)
금융/은행 인터페이스를 위한 반응형 그리드 레이아웃 구성 요소로, 고대비 색상과 미묘한 호버 마이크로 상호 작용을 특징으로 합니다. 다크 모드를 지원하며 중간 정도의 복잡성을 위해 설계되었습니다.
그리드 레이아웃 구성 요소 - 금융/뱅킹
금융/은행 애플리케이션을 위한 반응형 그리드 레이아웃 구성 요소로, 웜 뉴트럴 및 다크 모드 지원과 함께 깔끔한 Material Design 미학을 특징으로 합니다.
그리드 레이아웃 구성 요소
미니멀한 그리드 레이아웃 구성 요소로, 반응형 효과와 어두운 테마를 지원하는 단순하고 깔끔한 디자인을 특징으로 합니다. picsum.photos 및 randomuser.me 의 자리 표시자 이미지 및 아바타를 활용합니다.