Компоненты Заголовок Компонент заголовка

Компонент заголовка

Адаптивный компонент заголовка для панели мониторинга с микровзаимодействиями и яркими цветами, поддерживающий темную тему.

Предварительный просмотр

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>

Связанные компоненты

Компонент заголовка

Компонент заголовка в стиле Neumorphism для портфолио с темной темой, адаптивным дизайном и множеством интерактивных элементов.

Открытый

Компонент заголовка электронной коммерции

Адаптивный компонент заголовка электронной коммерции, созданный с использованием Tailwind CSS с принципами Material Design. Имеет монохроматическую цветовую гамму (оттенки синего), функционал поиска, меню навигации, корзину и профиль пользователя. Заголовок включает эффекты глубины, такие как тени, и поддерживает темный режим. Компонент полностью адаптивный с мобильным гамбургер-меню.

Открытый

Компонент заголовка социальных сетей

Сложный, отзывчивый в темном режиме компонент заголовка с минималистичным дизайном и дополнительной цветовой схемой, разработанный для интерфейсов социальных сетей.

Открытый