Компонент заголовка
Адаптивный компонент заголовка с дизайном Glassmorphism с полупрозрачными элементами, похожими на матовое стекло, и поддержкой темных тем.
HTML-код
<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
</nav>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
</div>
</header>Связанные компоненты
Компонент заголовка
Простой компонент заголовка, разработанный в стиле Neumorphism с яркими цветами, идеально подходит для блога/контентной веб-страницы. Он имеет поддержку темного режима для адаптивного дизайна.
Заголовок социальных сетей
Адаптивный компонент заголовка для интерфейсов социальных сетей, разработанный с использованием темного режима пользовательского интерфейса с использованием триадической цветовой схемы и минимального количества элементов. Он включает в себя название сайта, строку поиска и ссылку на профиль пользователя, а стили адаптированы для темного режима с помощью Tailwind CSS.
Бруталистский компонент заголовка
Сырой и жирный компонент заголовка, разработанный с помощью Tailwind CSS, отличается высокой контрастностью и необычными макетами, подходящими как для светлых, так и для темных тем.