인포그래픽 구성 요소
어두운 테마를 지원하는 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>관련 구성 요소
인포그래픽 구성 요소
뉴모피즘(Neumorphism) 스타일과 파스텔(Pastel) 색 구성표로 디자인된 간단한 인포그래픽 컴포넌트입니다. 프로필 카드와 기본 통계를 비즈니스 또는 기업 웹 사이트에 적합한 시각적으로 매력적인 레이아웃으로 표시합니다.
레트로인포그래픽컴포넌트
레트로/빈티지 디자인, 파스텔 색 구성표 및 다크 모드를 지원하는 반응형 인포그래픽 구성 요소입니다. 스타일링을 위해 Tailwind CSS를 사용하고 블로그 및 콘텐츠 소비에 적합한 복잡한 인터페이스를 위한 여러 대화형 요소를 포함합니다. 타임라인, 진행률 표시줄, 차트, 클릭 유도문안이 포함되어 있으며, 모두 80/90년대 미학과 파스텔 색상으로 꾸며져 있습니다. picsum.photos의 임의의 이미지를 사용하고 아바타에 randomuser.me 합니다.