제품 비교 구성 요소
glassmorphism 디자인, 흙색 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 제품 비교 구성 요소입니다. 두 개의 제품 카드가 큰 화면에 나란히 표시되고 작은 화면에 쌓여 표시됩니다.
HTML 코드
<div class="container mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<!-- Product 1 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product A</h2>
<img src="https://picsum.photos/seed/product1/4
00/300" alt="Product A" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
<!-- Product 2 -->
<div class="flex-1 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Product B</h2>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product B" class="rounded-md mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<li>Feature A</li>
<li>Feature B</li>
<li>Feature C</li>
</ul>
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded dark:bg-green-600 dark:hover:bg-green-700">Learn More</button>
</div>
</div>
</div>관련 구성 요소
Brutalism 제품 비교 구성 요소
예약/예약 시스템을 위해 설계된 브루탈리즘 스타일의 제품 비교 구성 요소로, 숲/녹색 색상 팔레트, 고대비 및 특이한 레이아웃을 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다.