Компонент «Диаграммы»
Сложный компонент диаграмм, предназначенный для веб-приложений электронной коммерции в темном режиме с цветовой гаммой в оттенках серого. Этот компонент включает в себя множество интерактивных элементов, таких как диаграммы, точки данных, подсказки и кнопки, с адаптивным дизайном с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
<div class="flex items-center justify-between mb-4">
<span class="text-lg">Last 30 Days</span>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
<button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
</div>
<div class="relative">
<img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
<span class="text-xl font-semibold">$23,000</span>
<span class="text-sm">Total Sales</span>
</div>
</div>
<div class="mt-4">
<div class="flex justify-around text-sm text-gray-400">
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 1</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 2</span>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
<span>User 3</span>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент «Диаграммы»
Компонент диаграмм в бруталистском стиле для бизнес-сайтов, отличающийся триадической цветовой гаммой и умеренной сложностью. Он включает в себя адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS.
Компонент диаграмм Cyberpunk - Правительство/Общество
Умеренно сложный компонент графиков с эстетикой киберпанка, подходящий для правительственных и общественных сайтов. Отличается темным фоном, яркими неоновыми акцентами и цветовой палитрой в стиле ретро/винтаж. Адаптивный и включает поддержку темного режима.
Industrial_Retro_RealEstate_Charts
Простые диаграммы сочетаются с индустриальной эстетикой ретро-недвижимости, с приглушенными цветами, открытыми элементами и адаптивным дизайном с поддержкой темного режима.