CCHub Logo CCHub Tailwind Collection
구성 요소 카드 머티리얼 디자인 카드

머티리얼 디자인 카드

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 머티리얼 디자인 스타일의 카드 구성 요소입니다. 고도 및 파급 효과, 시각적 단서가 특징입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

관련 구성 요소

카드 구성 요소

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

열다

다크 모드 카드 구성 요소

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

열다

Retro_E_commerce_Cards_Component

레트로/빈티지 미학, 흙색 및 다크 모드를 지원하는 반응형 전자 상거래 제품 카드 구성 요소로 온라인 쇼핑 경험에 적합합니다. 기능에는 제품 이미지, 이름, 가격 및 클릭 유도문안 버튼이 포함됩니다.

열다