Компонент «Липкая навигация»
Минималистичный плоский дизайн, липкий навигационный компонент с монохроматической цветовой гаммой для бизнес/корпоративных сайтов. Дизайн включает в себя множество интерактивных элементов и поддерживает темную тему.
HTML-код
<header class="bg-white dark:bg-gray-800 fixed top-0 inset-x-0 shadow-md z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Logo" class="w-10 h-10 rounded-full">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Business Name</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-150">Contact</a>
</nav>
<a href="#" class="hidden md:block bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 transition duration-150">Get Started</a>
<button class="md:hidden flex items-center justify-center p-2 text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 6h14M3 10h14M3 14h14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
</div>
</header>
<main class="mt-16 p-4">
<section class="bg-gray-100 dark:bg-gray-900 p-8 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Business</h2>
<p class="text-gray-600 dark:text-gray-400">We provide exceptional services to help you grow your business.</p>
<img src="https://picsum.photos/800/400" alt="Business Image" class="mt-4 rounded-lg shadow-md">
</section>
</main>Связанные компоненты
Компонент «Липкая навигация»
Липкий навигационный компонент со скевоморфным дизайном, триадической цветовой гаммой и простой версткой, подходящий для интерфейсов социальных сетей. Он поддерживает адаптивный дизайн и темную тему.
Компонент «Липкая навигация»
Сложная, скевоморфная липкая навигационная панель с яркими цветами, разработанная для интерфейсов социальных сетей. Включает адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS. Содержит изображение профиля, строку поиска, уведомления и значки сообщений.
Компонент «Липкая навигация»
Компонент липкой навигации в бруталистском стиле, подходящий для интерфейсов социальных сетей, отличается смелым, высококонтрастным дизайном и поддержкой темного режима.