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 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 glassmorphism 디자인 스타일을 특징으로 하는 구성 요소입니다.

열다

스큐어모픽 어스 톤 정부 카드

스큐어모픽 디자인 요소와 어스 톤 색 구성표가 있는 간단하고 반응이 빠른 카드 구성 요소로, 정부 또는 공공 서비스 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다