Компонент «Диаграммы»
Простой, отзывчивый компонент диаграммы с поддержкой пастельных тонов и темного режима, предназначенный для потребления блога/контента с тонкими микровзаимодействиями с помощью эффектов наведения. Нет JavaScript.
HTML-код
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
<div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
</div>
<div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
<div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
<div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
<div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
</div>
<div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
</div>
<div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
<div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
<div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
</div>
<div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент «Диаграммы»
Адаптивный компонент диаграмм, разработанный в соответствии с принципами Material Design, с пастельной цветовой гаммой и сложной интерактивностью для демонстрации портфолио. Он включает в себя поддержку темного режима с CSS-классами Tailwind.
Компонент «Диаграммы»
Сложный компонент диаграмм, предназначенный для веб-приложений электронной коммерции в темном режиме с цветовой гаммой в оттенках серого. Этот компонент включает в себя множество интерактивных элементов, таких как диаграммы, точки данных, подсказки и кнопки, с адаптивным дизайном с использованием Tailwind CSS.
График вибрантного стекломорфизма
Простой компонент диаграммы Glassmorphism с яркими цветами, подходящий для блогов и контентных сайтов. Компонент является адаптивным и включает поддержку темной темы с использованием Tailwind CSS.