Компоненты Навигация Компонент навигации

Компонент навигации

Простой компонент навигации, разработанный для блога с микровзаимодействиями и пастельной цветовой гаммой. Он отличается адаптивным макетом и поддержкой темных тем.

Предварительный просмотр

HTML-код

<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
            <span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
        </div>
        <ul class="flex space-x-6">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Связанные компоненты

3D_Earth_Tone_Dating_Social_Navigation

Адаптивный навигационный компонент для платформ знакомств и социальных сетей, выполненный в 3D-стиле, с земляными тонами и поддержкой темного режима. Включает интерактивные элементы, такие как аватар профиля, поиск и основные навигационные ссылки.

Открытый

Компонент навигации по дизайну материалов

Простой, отзывчивый навигационный компонент Material Design для интерфейсов социальных сетей с использованием цветовой схемы в оттенках серого. Имеет понятный макет с логотипом, навигационными ссылками, строкой поиска и аватаром пользователя. Включает поддержку темного режима с использованием префикса dark: от Tailwind.

Открытый

Роскошный навигационный компонент

Элегантный, отзывчивый навигационный компонент для модных и косметических брендов, отличающийся утонченным черно-белым дизайном с ярким акцентным цветом, поддержкой темного режима и минимальным количеством элементов.

Открытый