CCHub Logo CCHub Tailwind Collection
구성 요소 카드 다크 모드 카드 구성 요소

다크 모드 카드 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-400">@johndoe</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
            <p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-400">@janesmith</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
            <p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Mike Johnson</h2>
                    <p class="text-gray-400">@mikejohnson</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
            <p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
        </div>
    </div>
</div>

관련 구성 요소

Industrial_Farming_Cards_Component

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

열다

카드 구성 요소

기업/전문 비즈니스 환경에 적합한 간단하고 깨끗하며 신뢰할 수 있는 카드 구성 요소로, 암호화폐 및 블록체인 애플리케이션을 위해 특별히 설계되었습니다. 보색 구성표, 반응형 디자인 및 다크 모드 지원이 특징입니다.

열다

Neon_Glow_Farming_Cards

농업/농업 웹사이트를 위한 복잡한 반응형 카드 세트로, 다크 모드 지원을 포함하여 일몰/따뜻한 색 구성표와 함께 네온/글로우 효과를 특징으로 합니다.

열다