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>

관련 구성 요소

제품 비교 구성 요소

따뜻한 무채색과 미묘한 네온/글로우 효과가 있는 반응형 제품 비교 구성 요소로, 교육용 플랫폼용으로 설계되었습니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.

열다

제품 비교 구성 요소

유기적/자연에서 영감을 받은 디자인, 보색 구성표, 다크 모드 지원 및 스포츠/피트니스 애플리케이션에 맞게 조정된 복잡하고 반응이 빠른 제품 비교 구성 요소입니다. 흐르는 선과 자연스러운 형태가 특징입니다.

열다

제품 비교 구성 요소

어두운 테마를 지원하는 반응형 제품 비교 구성 요소로, 미니멀리스트/플랫 디자인과 파스텔 색상 구성표를 특징으로 합니다. 이 복잡한 구성 요소는 대시보드에 적합하므로 사용자는 자세한 사양과 대화형 요소가 있는 여러 제품을 비교할 수 있습니다.

열다