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

인포그래픽 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하여 스큐어모픽 스타일로 디자인된 반응형 인포그래픽 구성 요소입니다. 정보를 시각적으로 표시하기 위해 실제 요소를 모방합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

인포그래픽 구성 요소

브루탈리즘 스타일, 고대비, 특이한 레이아웃, 테일윈드 CSS를 사용한 다크 모드 지원으로 반응하는 인포그래픽 구성 요소

열다

인포그래픽 구성 요소

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

열다

인포그래픽 구성 요소

흙, 나무, 풍경에서 영감을 받은 흙색의 뉴모픽 인포그래픽 구성 요소입니다. 비즈니스/기업용으로 적당히 복잡한 소프트 UI 스타일이 특징입니다. 디자인은 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다