CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 표시 구성 요소 콘텐츠 표시 구성 요소

콘텐츠 표시 구성 요소

전자 상거래를 위한 간단한 빈티지 스타일의 반응형 콘텐츠 디스플레이 구성 요소로, 단색 색 구성표를 사용하고 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-2">Vintage Product Title</h2>
        <p class="text-gray-300 dark:text-gray-400 mb-4">A brief description of the vintage product that evokes nostalgia from the 80s and 90s.</p>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-100 dark:text-gray-200">Seller Name</p>
                <p class="text-gray-500 dark:text-gray-400">Seller Rating: ⭐⭐⭐⭐</p>
            </div>
        </div>
        <span class="text-lg font-semibold text-gray-100 dark:text-gray-200">$29.99</span>
        <div class="mt-4">
            <button class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
    </div>
</div>

관련 구성 요소

Content Display Components 컴포넌트

비즈니스/기업 웹 사이트를 위해 설계된 반응형 콘텐츠 디스플레이 구성 요소로, 다크 모드를 지원하고 생생한 색 구성표를 제공합니다. 여기에는 사용자 아바타, 텍스트 콘텐츠 및 이미지에 대한 섹션이 포함됩니다.

열다

SimpleContent디스플레이

반응형 디자인과 Tailwind CSS를 사용하는 어두운 테마를 지원하는 간단한 콘텐츠 표시 구성 요소입니다.

열다

아르 데코 콘텐츠 디스플레이 구성 요소

비즈니스/기업 웹사이트를 위한 복잡하고 반응이 빠른 아르데코 스타일의 콘텐츠 디스플레이 구성 요소로, 기하학적 패턴, 풍부한 보석 색조 및 다크 모드 지원을 특징으로 합니다. 기능, 추천사 및 클릭 유도문안에 대한 여러 섹션이 포함되어 있습니다.

열다