График продаж Glassmorphism
Простой, отзывчивый компонент диаграммы со стилем Glassmorphism, яркой цветовой схемой и поддержкой темного режима, подходящий для информационных панелей электронной коммерции.
HTML-код
<div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
<p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
</div>
<div class="text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
<p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
</div>
</div>
<div class="mt-6">
<div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
</div>
</div>Связанные компоненты
Sports_Fitness_Charts_Component
Сложный, отзывчивый компонент диаграмм для спортивных и фитнес-приложений, отличающийся чистым, минималистичным дизайном швейцарской типографики с черно-белой основой и одним акцентным цветом. Включает поддержку темного режима и макет на основе сетки для различных визуализаций данных.
Компонент «Нейроморфные диаграммы»
Сложный, отзывчивый компонент диаграмм с неоморфным стилем дизайна и аналогичной цветовой схемой, подходящий для портфолио для демонстрации работ или продуктов. Включает поддержку темного режима.
RetroChartsComponent (РетроГрафикиКомпонент)
Компонент ретро/винтажной диаграммы с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS. Содержит замещающие изображения.