RetroChartsComponent (РетроГрафикиКомпонент)
Компонент ретро/винтажной диаграммы с отзывчивыми эффектами и поддержкой темной темы с использованием 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>
Связанные компоненты
Компонент «Диаграммы»
Адаптивный компонент диаграмм, разработанный в соответствии с принципами Material Design, с пастельной цветовой гаммой и сложной интерактивностью для демонстрации портфолио. Он включает в себя поддержку темного режима с CSS-классами Tailwind.
Гистограмма в темном режиме
Отзывчивая гистограмма для отображения данных с поддержкой темного режима.
Компонент «Диаграммы»
Адаптивный компонент диаграмм в 3D-стиле с поддержкой темной темы с использованием Tailwind CSS.