CCHub Logo CCHub Tailwind Collection
구성 요소 인포그래픽 인포그래픽 구성 요소

인포그래픽 구성 요소

3D 디자인 요소와 블로그/콘텐츠 사용을 위한 유사한 색 구성표가 있는 간단하고 반응이 빠른 인포그래픽 구성 요소입니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

관련 구성 요소

인포그래픽 구성 요소

Tailwind CSS를 사용하여 비즈니스/기업용으로 Neumorphism 디자인, 보색 구성표, 반응형 및 다크 모드 지원이 있는 복잡한 인포그래픽 구성 요소.

열다

인포그래픽 구성 요소

반응형 인포그래픽 구성 요소로, 어두운 테마 지원으로 사용자 작업에 응답하는 작고 매력적인 애니메이션을 특징으로 하며 Tailwind CSS를 사용하여 만들었습니다.

열다

레트로 빈티지 인포그래픽 구성 요소

Tailwind CSS로 제작된 반응형 파스텔 색상의 레트로/빈티지 스타일 소셜 미디어 인포그래픽 대시보드 구성 요소로, 사용자 프로필 통계, 인기 해시태그 막대 차트 및 예시 이미지를 제공합니다. Tailwind의 dark: 접두사 및 대화형 호버 애니메이션(JavaScript 필요 없음)을 통한 다크 모드 지원이 포함됩니다.

열다