Компонент «Дашборды»
Простой и отзывчивый компонент информационных панелей, предназначенный для демонстрации портфолио, с микровзаимодействиями и сосредоточенный на земляных тонах. Он поддерживает темную тему с использованием Tailwind CSS.
HTML-код
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
<div class="p-4">
<h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
<div class="p-4">
<h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
<div class="p-4">
<h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
</div>
</div>
</div>
<footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
<p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
</footer>
</div>Связанные компоненты
Компонент «Дашборды»
Сложный компонент дашбордов, предназначенный для темного режима с монохроматической цветовой гаммой для бизнеса/корпоративного использования. Он отличается богатыми интерактивными элементами и является адаптивным.
Бруталистский компонент панели в оттенках серого
Простой, бруталистский макет панели управления в оттенках серого для бизнес/корпоративных веб-сайтов, адаптивный с поддержкой темного режима, созданный с помощью Tailwind CSS.
Компонент «Дашборды»
Компонент приборной панели в стиле ретро, разработанный для деловых или корпоративных веб-сайтов, сочетает в себе эстетику 80-х/90-х годов с современным макетом и цветовой гаммой. Он адаптивный и поддерживает темную тему с интерактивными элементами, такими как карточки для статистики, профили пользователей и многое другое.