Компонент навигации
Адаптивный компонент навигации, разработанный с микровзаимодействиями и включающий увлекательную анимацию на основе действий пользователя, поддерживающий как светлую, так и темную темы. Компонент включает в себя аватар профиля, навигационные ссылки и эффекты наведения.
HTML-код
<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
</div>
</nav>
Связанные компоненты
Игривый компонент криптонавигации в оттенках серого
Игривый и дружелюбный компонент навигации в оттенках серого для криптовалют и блокчейн-приложений, отличающийся округлыми элементами, интерактивными состояниями, полной отзывчивостью и поддержкой темного режима.
Неоновое свечение правительственной навигации
Отзывчивый навигационный компонент для государственных/государственных услуг с неоновым свечением, конфетно-сладкой цветовой гаммой и поддержкой темного режима. Отличается яркими, светящимися элементами с яркими световыми эффектами.
Компоненты навигации
Адаптивный навигационный компонент с микровзаимодействиями и поддержкой темных тем, разработанный с использованием Tailwind CSS.