Компоненты Боковая панель Компонент боковой панели

Компонент боковой панели

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

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

HTML-код

<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

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

Простая вибрационная боковая панель блога

Простой, адаптивный компонент боковой панели для содержимого блога, разработанный с яркими цветами и ощущением материала с использованием Tailwind CSS. Включает навигационные ссылки и раздел профиля пользователя. Поддерживает темный режим с использованием префикса dark: от Tailwind. Исправлено на больших экранах, скрыто на маленьких экранах.

Открытый

Боковая панель «Градиентное сельское хозяйство»

Простой, адаптивный компонент боковой панели с монохроматическим градиентным дизайном, подходящий для сельскохозяйственных и фермерских сайтов. Включает поддержку темного режима.

Открытый

Компонент боковой панели

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

Открытый