Компонент заголовка
Простой компонент заголовка, разработанный в стиле Neumorphism с яркими цветами, идеально подходит для блога/контентной веб-страницы. Он имеет поддержку темного режима для адаптивного дизайна.
HTML-код
<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
</nav>
</header>Связанные компоненты
Компонент заголовка электронной коммерции
Отзывчивый, яркий, вдохновленный Material Design компонент заголовка для веб-сайтов электронной коммерции с навигацией, поиском и действиями пользователя. Поддерживает темный режим.
Компонент заголовка
Отзывчивый компонент заголовка с ретро/винтажным дизайном, с поддержкой темной темы и ностальгической эстетикой 80-х/90-х годов.
Компонент заголовка
Адаптивный компонент заголовка с микровзаимодействиями с небольшими привлекательными анимациями и поддержкой темных тем с использованием Tailwind CSS.