CCHub Logo CCHub Tailwind Collection
구성 요소 카드 카드 구성 요소

카드 구성 요소

반응형 블로그/콘텐츠 카드 구성 요소는 스큐어모픽 스타일과 흙색으로 디자인되었습니다. 제목, 이미지, 간략한 설명 및 작성자 정보에 대한 아바타가 포함됩니다. 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

관련 구성 요소

다크 모드 소셜 카드

어스 톤의 다크 모드 스타일링된 반응형 카드 구성 요소로, 소셜 미디어 인터페이스용으로 설계되었습니다.

열다

Luxury_Portfolio_Cards_Ocean_Blue

복잡한 럭셔리/프리미엄 포트폴리오 카드 구성 요소로, 작품이나 제품을 선보이기 위해 바다/블루 톤으로 디자인되었습니다. 반응형 디자인, 세련된 타이포그래피, 우아한 비주얼, 완전한 다크 모드 지원이 특징입니다.

열다

Crypto_Blockchain_Cards_Component

암호화폐 및 블록체인 애플리케이션용으로 설계된 반응형 카드 세트로, 따뜻한 중성 색상 구성표, 머티리얼에서 영감을 받은 그림자 및 다크 모드 지원을 특징으로 합니다.

열다