Компонент «Липкая навигация»
Адаптивный компонент липкой навигации, стилизованный в соответствии с принципами Material Design с использованием Tailwind CSS, с темной темой и случайными изображениями-заполнителями и аватаром.
HTML-код
<nav class="bg-white dark:bg-gray-800 shadow-lg fixed w-full z-10">
<div class="max-w-7xl mx-auto p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="pt-16">
<header class="bg-gray-100 dark:bg-gray-900 h-screen flex items-center justify-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to My Website</h2>
</header>
<section class="p-8">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Gallery</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<img src="https://picsum.photos/200/300?random=1" alt="Random Image" class="rounded shadow-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Random Image" class="rounded shadow-lg">
<img src="https://picsum.photos/200/300?random=3" alt="Random Image" class="rounded shadow-lg">
<img src="https://picsum.photos/200/300?random=4" alt="Random Image" class="rounded shadow-lg">
</div>
</section>
</div>
<style>
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1f2937;
}
}
</style>Связанные компоненты
Компонент «Липкая навигация»
Липкий навигационный компонент со скевоморфным дизайном, триадической цветовой гаммой и простой версткой, подходящий для интерфейсов социальных сетей. Он поддерживает адаптивный дизайн и темную тему.
Компонент «Липкая навигация»
Закрепленный компонент навигации, предназначенный для темного режима с отзывчивыми эффектами с использованием Tailwind CSS.
Оттенки серого Скевоморфный Липкий Навигация
Отзывчивая закрепленная панель навигации для блогов, стилизованная под скевоморфизм с использованием палитры оттенков серого. Особенности поддержки темного режима и простой верстки. Собран с помощью Tailwind CSS (только HTML), без JavaScript. Скевоморфный дизайн направлен на то, чтобы панель навигации выглядела как физический, слегка приподнятый элемент.