Компонент «Дашборды»
Компонент приборной панели в стиле ретро, разработанный для деловых или корпоративных веб-сайтов, сочетает в себе эстетику 80-х/90-х годов с современным макетом и цветовой гаммой. Он адаптивный и поддерживает темную тему с интерактивными элементами, такими как карточки для статистики, профили пользователей и многое другое.
HTML-код
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
<header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
<button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
</header>
<main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Total Sales</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
<img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Users</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
<img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Feedback</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
<img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Team Members</h2>
<div class="flex space-x-2 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
</div>
</div>
</main>
<footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>Связанные компоненты
Компонент «Дашборды»
Простой и отзывчивый компонент информационных панелей, предназначенный для демонстрации портфолио, с микровзаимодействиями и сосредоточенный на земляных тонах. Он поддерживает темную тему с использованием Tailwind CSS.
Компонент панели управления
Простой компонент приборной панели с 3D-дизайном и пастельной цветовой гаммой, отзывчивый и с поддержкой темного режима.
Компонент «Дашборды»
Компонент дашборда с адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.