Компонент заголовка
Адаптивный компонент заголовка для панели мониторинга с микровзаимодействиями и яркими цветами, поддерживающий темную тему.
HTML-код
<header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
<h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
</nav>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
<button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
</div>
</header>Связанные компоненты
Компонент заголовка
компонент заголовка tailwind с 3D-дизайном, пастельной цветовой гаммой, сложной сложностью, назначением приборной панели, адаптивным дизайном и поддержкой темных тем
Бизнес-заголовок Material Design
Вдохновленный Material Design простой компонент заголовка с дополнительной цветовой схемой для бизнес-сайтов. Адаптивный дизайн с поддержкой темных тем.
Компонент 3D заголовка
Сложный интерактивный компонент заголовка, разработанный для интерфейсов социальных сетей с использованием 3D-стиля с оттенками серого. Он включает в себя логотип, строку поиска, аватары пользователей и кнопки действий с отзывчивым поведением и поддержкой темного режима.