검색 구성 요소

카테고리

구성 요소 인포그래픽

인포그래픽

정보 또는 데이터의 시각적 표현

인포그래픽 구성 요소

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

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
    <div class="flex flex-wrap">
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
                <p class="text-gray-600 dark:text-gray-400">50%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
                <p class="text-gray-600 dark:text-gray-400">70%</p>
            </div>
        </div>
        <div class="w-full md:w-1/3 flex items-center mb-4">
            <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
            <div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
                <p class="text-gray-600 dark:text-gray-400">30%</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
        <div class="flex flex-wrap">
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
            </div>
            <div class="w-1/2 md:w-1/4 flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
                <p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

인포그래픽 구성 요소

Tailwind CSS를 사용하여 매력적인 마이크로 인터랙션과 어두운 테마를 지원하는 반응형 인포그래픽 구성 요소입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    <div class="ml-3">
      <h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
      <span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
    </div>
  </div>
</div>

인포그래픽 구성 요소

깔끔한 공간과 최소한의 요소를 특징으로 하는 미니멀한 인포그래픽 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

인포그래픽 구성 요소

스큐어모피즘으로 디자인된 인포그래픽 컴포넌트로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics Component</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/100" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Section Title</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a description of this section. It mimics a real-world interface.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md"> 
            <img src="https://picsum.photos/200/101" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Another Section</h3>
            <p class="text-gray-600 dark:text-gray-300">Details about this section are displayed here, using a real-world inspired design.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-6">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="ml-2 text-gray-800 dark:text-gray-200 font-medium">User Name</span>
        </div>
        <span class="text-gray-600 dark:text-gray-300">3 hours ago</span>
    </div>
</div>