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

3D 카드 구성 요소

3D 디자인 스타일, 생생한 색상, 대시보드에 적합한 여러 대화형 요소가 있는 반응형 카드 구성 요소입니다. Tailwind의 다크 프리픽스를 사용하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
        </div>
    </div>
</div>

관련 구성 요소

Industrial_Farming_Cards_Component

농업 및 농업 웹사이트에 적합한 산업, 원자재 미학, 따뜻한 중성 색상 및 다크 모드를 지원하는 반응형 카드 세트입니다. 노출된 요소와 실용적인 디자인이 특징입니다.

열다

전자 상거래 카드

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

열다

소셜 미디어 카드 구성 요소

소셜 미디어 인터페이스에 적합한 미니멀하고 생동감 넘치는 카드 구성 요소로, 이미지, 좋아요, 댓글 및 공유 옵션이 포함된 사용자 게시물을 표시합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다