인포그래픽 구성 요소
흙, 나무, 풍경에서 영감을 받은 흙색의 뉴모픽 인포그래픽 구성 요소입니다. 비즈니스/기업용으로 적당히 복잡한 소프트 UI 스타일이 특징입니다. 디자인은 반응형이며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md relative overflow-hidden">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Business Overview</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">An overview of the current business landscape and insights into market trends.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Sales Data</h3>
<img src="https://picsum.photos/200/100" alt="Sales Data Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Current month sales: 2500 units</p>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Customer Growth</h3>
<img src="https://picsum.photos/200/100?random=1" alt="Customer Growth Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Growth rate: 15% YoY</p>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-inner">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Market Trends</h3>
<img src="https://picsum.photos/200/100?random=2" alt="Market Trends Image" class="rounded-lg my-2">
<p class="text-gray-600 dark:text-gray-400">Emerging trends in the industry.</p>
</div>
</div>
<div class="mt-6">
<h4 class="font-semibold text-gray-800 dark:text-gray-200">Team Members</h4>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Team Member" class="w-12 h-12 rounded-full shadow-inner">
</div>
</div>
</div>관련 구성 요소
인포그래픽 구성 요소
3D 디자인 요소, 파스텔 색상 구성표, 대시보드에 대한 중간 정도의 복잡성을 갖춘 반응형 인포그래픽 구성 요소이며 다크 모드를 지원합니다. JavaScript는 없으며 Tailwind CSS가 있는 HTML만 있습니다.
인포그래픽 구성 요소
마켓플레이스 플랫폼을 위한 간단한 인포그래픽 구성 요소로, 매력적인 호버 효과를 제공합니다. 보라색/보라색 색 구성표를 사용하며 다크 모드 지원으로 완벽하게 반응합니다.