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>

관련 구성 요소

스큐어모픽 카드 컴포넌트

스큐어모픽 스타일로 디자인된 간단한 카드 구성 요소로, 읽기 및 콘텐츠 소비를 위해 유사한 색 구성표를 사용합니다. 이 구성 요소는 반응형이며 어두운 테마를 지원합니다.

열다

전자 상거래 카드

Tailwind CSS 및 머티리얼 디자인 원칙을 사용하여 다크 모드를 지원하는 반응형 전자 상거래 카드 구성 요소. 버튼과 호버 효과와 같은 대화형 요소를 포함하여 중간 정도의 복잡성을 가진 생생한 색 구성표가 특징입니다. 그리드 기반 레이아웃을 사용하고 깊이를 위해 그림자를 통합합니다.

열다

Neumorphic Cards 컴포넌트

어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.

열다