Компоненты Компоненты навигации Компонент скевоморфной навигации

Компонент скевоморфной навигации

Навигационный компонент, выполненный в скевоморфном стиле, с дополнительной цветовой схемой, подходит для приборной панели с визуализацией данных и панелями управления. Он включает в себя интерактивные элементы для вовлечения пользователя.

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

HTML-код

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

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

Ретро навигация по социальным сетям

Адаптивная навигационная составляющая с темным режимом для социальных сетей (ретро/винтаж, земляные тона, умеренная сложность)

Открытый

Навигационный компонент брутализма

Адаптивный навигационный компонент, выполненный в бруталистском стиле, демонстрирующий монохроматическую цветовую гамму, идеально подходит для сайта-портфолио. Особенности включают в себя смелый макет с высокой контрастностью, поддержку темного режима с использованием Tailwind CSS и интерактивные элементы, такие как выпадающие списки или ссылки на кнопки.

Открытый

Компонент компонентов навигации

Адаптивный компонент навигации с поддержкой темного режима с использованием Tailwind CSS. Он включает в себя логотип, навигационные ссылки и кнопку призыва к действию.

Открытый