Заголовок социальных сетей
Адаптивный компонент заголовка для интерфейсов социальных сетей, разработанный с использованием темного режима пользовательского интерфейса с использованием триадической цветовой схемы и минимального количества элементов. Он включает в себя название сайта, строку поиска и ссылку на профиль пользователя, а стили адаптированы для темного режима с помощью Tailwind CSS.
HTML-код
<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-xl font-bold">SocialNet</div>
<div class="flex-grow mx-4 max-w-md">
<input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
</div>
<nav>
<a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
</nav>
</div>
</header>Связанные компоненты
Скевоморфный компонент заголовка
Простой и адаптивный компонент заголовка, разработанный для сайтов электронной коммерции в скевоморфном стиле, использующий цветовую схему оттенков серого и поддерживающий темный режим.
Компонент заголовка
Адаптивный компонент заголовка с поддержкой темного режима, логотипом, навигационными ссылками и кнопкой призыва к действию. В дизайне используется темный фон для снижения нагрузки на глаза.
Компонент заголовка
компонент заголовка tailwind с 3D-дизайном, пастельной цветовой гаммой, сложной сложностью, назначением приборной панели, адаптивным дизайном и поддержкой темных тем