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

Functional Components 구성 요소

비즈니스-기업 스타일의 실제 제품을 모방한 웹 구성 요소로, 보색, 단순한 레이아웃, 다크 모드를 지원하는 반응형 디자인을 갖추고 있습니다.

미리 보기

HTML 코드 

<div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

관련 구성 요소

Functional Components 구성 요소

다크 모드를 지원하는 간단한 기능 구성 요소입니다.

열다

Skeuomorphic_Analogous_Simple_Business_Component

유사한 색상을 사용하는 스큐어모픽 스타일로 설계된 간단한 비즈니스 구성 요소로, 데스크톱, 태블릿 및 모바일에 반응하며 다크 모드를 지원합니다.

열다

Microinteractions_Triadic_Dashboard_Component

트라이어딕 색 구성표가 있는 반응형 대시보드 구성 요소로, 사용자 참여를 위한 마이크로 인터랙션을 통합합니다. 데이터 시각화 요소와 컨트롤이 있으며 완전한 다크 모드를 지원합니다.

열다