RetroCharts구성 요소
Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 레트로/빈티지 차트 구성 요소입니다. 자리 표시자 이미지를 포함합니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
<div class="relative h-48">
<!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
<path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
</svg>
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
</div>
<div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>January</span>
<span>February</span>
<span>March</span>
<span>April</span>
<span>May</span>
</div>
</div>