CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 Functional Components 구성 요소

Functional Components 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 간단한 웹 구성 요소로, 매력적인 마이크로 인터랙션과 어두운 테마를 지원하는 그레이스케일 색 구성표를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

관련 구성 요소

Functional Components 구성 요소

Material Design 원칙, 유사한 색 구성표 및 적당한 복잡성을 사용하는 기능적 구성 요소가 있는 대시보드 구성 요소입니다. 이 구성 요소에는 Tailwind CSS를 사용하는 반응형 디자인 및 어두운 테마 지원이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다

블로그 기능 구성 요소

기능적 구성 요소 3D 디자인의 구성 요소, 보색 구성표, 블로그의 중간 정도의 복잡성, 어두운 테마 지원으로 반응 형. JS는 없고 HTML과 Tailwind만 있습니다.

열다

Neon_Glow_Marketplace_Component

밝고 빛나는 요소와 트라이어딕 색 구성표가 있는 복잡한 마켓플레이스 구성 요소로, 멀티벤더 플랫폼을 위해 설계되었습니다. 기능에는 제품 카드, 범주, 검색 및 사용자 프로필이 포함되며 모두 반응형이며 다크 모드를 지원합니다.

열다