미니멀리스트 오션 블루 그리드 레이아웃
패션/뷰티 브랜드를 위한 미니멀하고 반응이 빠른 그리드 레이아웃 구성 요소로, 오션 블루 톤과 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="bg-sky-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-blue-900 dark:text-sky-300 text-center mb-12 sm:mb-16">
Explore Our Latest Collection
</h2>
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1018/400/500" alt="Elegant Blue Dress">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Ocean Whisper Dress</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Effortless elegance for every occasion.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$129.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1020/400/500" alt="Luxurious Silk Scarf">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Azure Silk Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Soft and flowing, a touch of luxury.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$49.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1039/400/500" alt="Deep Blue Handbag">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Marine Mini Bag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Compact and chic, perfect for essentials.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$89.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/97/400/500" alt="Elegant Pearl Necklace">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Seashell Pearl Necklace</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Timeless beauty for a delicate touch.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1041/400/500" alt="Minimalist Silver Earrings">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coral Drop Earrings</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Subtle elegance for everyday wear.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$59.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1021/400/500" alt="Trendy Sunglasses Blue Frame">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Deep Sea Shades</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stylish protection for radiant eyes.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$79.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1042/400/500" alt="Soft Blue Knitwear">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coastal Knit Sweater</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Cozy comfort for colder days.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$95.00</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1025/400/500" alt="Minimalist Blue Sandals">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Lagoon Sandals</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lightweight and stylish for summer walks.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$65.00</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
FinancialGridWithInteractions (영어)
금융/은행 인터페이스를 위한 반응형 그리드 레이아웃 구성 요소로, 고대비 색상과 미묘한 호버 마이크로 상호 작용을 특징으로 합니다. 다크 모드를 지원하며 중간 정도의 복잡성을 위해 설계되었습니다.
아르 데코 게이밍 그리드 레이아웃
반응형 아르데코에서 영감을 받은 게임 그리드 레이아웃은 기하학적 패턴, 회색조 색상 및 인터랙티브 요소를 특징으로 합니다. 게임 웹사이트 및 인터페이스용으로 설계되었으며 다크 모드를 지원합니다.
그리드 레이아웃 구성 요소 - 금융/뱅킹
금융/은행 애플리케이션을 위한 반응형 그리드 레이아웃 구성 요소로, 웜 뉴트럴 및 다크 모드 지원과 함께 깔끔한 Material Design 미학을 특징으로 합니다.