CCHub Logo CCHub Tailwind Collection
구성 요소 카드 Neumorphic Cards 컴포넌트

Neumorphic Cards 컴포넌트

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

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg 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 short description of the card content.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Crypto_Blockchain_Cards_Component

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

열다

다크 모드 카드 구성 요소

비즈니스/기업 웹사이트용으로 설계된 반응형 카드 구성 요소로, 다크 모드 UI와 회색조 색 구성표를 갖추고 있으며, 중간 정도의 복잡성과 상호 작용성을 특징으로 합니다.

열다

Music_Cards_Component

반응형 음악/오디오 카드 구성 요소는 풍부한 보석 색조의 그라데이션과 부드러운 전환을 특징으로 하며 다크 모드를 지원합니다. 앨범 또는 트랙 표시를 위한 간단한 레이아웃.

열다