Компонент боковой панели
Адаптивный компонент боковой панели для демонстрации элементов портфолио с привлекательными микровзаимодействиями и дополнительной цветовой схемой, поддерживающей темный режим.
HTML-код
<aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>
<div class="mt-4">
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>
<a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>
</div>
</div>
<div class="flex flex-col items-center px-4 py-4">
<img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
</aside>Связанные компоненты
Компонент боковой панели
Минималистичный компонент боковой панели с адаптивным дизайном и поддержкой темной темы, использующий Tailwind CSS.
Боковая панель Glassmorphism с темным режимом
Отзывчивый компонент боковой панели с дизайном glassmorphism и поддержкой темного режима с использованием Tailwind CSS. Он включает в себя логотип, название сайта, навигационные ссылки и раздел профиля пользователя.
Компонент боковой панели
Сложный, отзывчивый компонент боковой панели в стиле Glassmorphism для приборной панели с поддержкой землистых тонов и темного режима.