Компонент «Диаграммы»
Сложный компонент диаграмм, разработанный для деловых и корпоративных сайтов, с 3D-дизайном, дополнительной цветовой схемой и адаптивной структурой с поддержкой темного режима.
HTML-код
<div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
<div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
<img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
<img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
<div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
<img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
</div>
<div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
<img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
</div>
</div>
<div class="flex justify-between items-center mt-6 w-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
<div class="ml-3">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
</div>
</div>
</div>Связанные компоненты
СкевоморфныйГрафик социальных сетей
Простой, вдохновленный скевоморфизмом компонент диаграмм для социальных сетей с дополнительными цветами и адаптивным дизайном.
Retro_Vintage_Pastel_Social_Charts_Component
Сложный, отзывчивый компонент диаграмм с эстетикой ретро/винтаж 80-х/90-х годов с использованием пастельных тонов, разработанный для платформ социальных сетей. Включает поддержку темного режима.
Компонент «Диаграммы»
Отзывчивый компонент панели управления, демонстрирующий скевоморфный дизайн с пастельными тонами и поддержкой темного режима, с имитацией гистограмм, линейных диаграмм и ключевых показателей производительности с использованием чистого HTML и Tailwind CSS. JavaScript не включен; Диаграммы являются визуальными представлениями.