CCHub Logo CCHub Tailwind Collection
구성 요소 제품 비교 제품 비교 구성 요소

제품 비교 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인으로 스타일이 지정된 반응형 제품 비교 구성 요소로, 그리드 기반 레이아웃, 그림자 및 어두운 테마 지원을 제공합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-4xl mx-auto">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200 text-center">Product Comparison</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Product 1" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 1 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
            <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/400/250?random=2" alt="Product 2" />
            <h3 class="text-xl font-medium mt-2 text-gray-800 dark:text-gray-200">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of Product 2 goes here.</p>
            <div class="flex items-center mt-2">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <span class="ml-2 text-gray-700 dark:text-gray-300">User Name</span>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

제품 비교 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 제품 비교 구성 요소입니다. 비교를 위해 제품 이름, 기능 및 가격을 표시합니다.

열다

제품 비교 구성 요소 - Retro Corporate Style

단색 블루 색 구성표를 사용하여 레트로/빈티지 기업 미학을 가미한 반응형 제품 비교 구성 요소입니다. 다양한 인터랙티브 요소와 다크 모드 지원이 특징입니다. 이 디자인에는 80/90년대에서 영감을 받은 기하학적 패턴, 올드스쿨 타이포그래피, 픽셀과 같은 액센트가 있는 레트로 스타일의 카드가 포함됩니다. 전문성을 유지하면서 향수를 불러일으키는 디자인으로 눈에 띄고자 하는 비즈니스 웹사이트에 적합합니다.

열다

제품 비교 구성 요소

미니멀리스트/플랫 디자인, 어스 톤 색상 구성표 및 Tailwind CSS를 사용한 대시보드 목적의 중간 복잡성이 있는 제품 비교 구성 요소. 구성 요소는 반응형이며 어두운 테마를 지원합니다. 자바스크립트가 없습니다.

열다