Поиск компонентов

Категории

Компоненты Компоненты улучшения навигации

Компоненты улучшения навигации

Продвинутые компоненты, улучшающие навигацию по сайту

Компонент компонентов улучшения навигации

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

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

                <nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Компоненты улучшения навигации

Простой компонент улучшения навигации в темном режиме для демонстрации портфолио с использованием Tailwind CSS.

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

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">My Portfolio</h1>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Home</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">About</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Projects</a></li>
            <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white">Contact</a></li>
        </ul>
    </div>
</nav>

<section class="bg-gray-900 dark:bg-gray-800 p-8">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-white text-2xl font-bold">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=1" alt="Project 1" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 1</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 1.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=2" alt="Project 2" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 2</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 2.</p>
            </div>
            <div class="bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
                <img src="https://picsum.photos/200/300?random=3" alt="Project 3" class="rounded-lg w-full" />
                <h3 class="text-white font-semibold mt-2">Project 3</h3>
                <p class="text-gray-300 dark:text-gray-400">Description of Project 3.</p>
            </div>
        </div>
    </div>
</section>

<footer class="bg-gray-800 dark:bg-gray-900 p-4 mt-8">
    <div class="max-w-6xl mx-auto text-center">
        <p class="text-gray-300 dark:text-gray-400">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</footer>

Компонент улучшения навигации

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

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

                <nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

Компонент улучшения навигации

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

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

                <nav class="bg-gray-900 text-white p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
            <span class="text-xl font-bold">MyApp</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-300">Home</a>
            <a href="#" class="hover:text-gray-300">About</a>
            <a href="#" class="hover:text-gray-300">Services</a>
            <a href="#" class="hover:text-gray-300">Contact</a>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
            <button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
        </div>
    </div>
</nav>
<div class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex flex-col md:flex-row md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
            <p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
        </div>
        <div class="flex space-x-4">
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #fff;
        }
    }
</style>

Компонент улучшения навигации

Адаптивный компонент навигации, разработанный в стиле Material Design с использованием Tailwind CSS, с поддержкой темных тем и отзывчивыми эффектами.

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

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <a href="#" class="text-gray-800 dark:text-white font-semibold text-lg">Brand</a>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="px-4 md:hidden">
        <div class="py-4 flex flex-col space-y-2">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
    </div>
</nav>

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-4">Welcome to Our Website</h1>
    <p class="mb-4">This is a responsive navigation enhancement component made using Tailwind CSS with Material Design principles.</p>
    <img src="https://picsum.photos/800/400" alt="Placeholder" class="rounded shadow-lg mb-4">
    <div class="flex">
        <div class="w-1/3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-16 w-16 shadow">
        </div>
        <div class="w-2/3 pl-4">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

Компоненты улучшения навигации

Навигационный компонент в стиле Neumorphism с поддержкой темного режима и адаптивным дизайном

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

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-4 flex flex-col md:flex-row items-center justify-between transition-all duration-300">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full shadow-md mb-2">
        <span class="text-xl font-semibold text-gray-800 dark:text-gray-200 ml-2">Brand Name</span>
    </div>
    <div class="flex flex-col md:flex-row md:space-x-4 mt-4 md:mt-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 py-2 px-4 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">Contact</a>
    </div>
    <div class="mt-4 md:mt-0">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md">
    </div>
</nav>

Компоненты улучшения навигации

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

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

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="relative flex items-center justify-between h-16">
            <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                <!-- Mobile menu button -->
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8" src="https://picsum.photos/40/40" alt="Logo" />
                </div>
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
                        <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sm:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        </div>
    </div>
</nav>

<section class="bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">Welcome to Our Website</h1>
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/300" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 1</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 1.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/301" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 2</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 2.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <img class="rounded-md" src="https://picsum.photos/500/302" alt="Placeholder Image" />
                <h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 3</h2>
                <p class="text-gray-600 dark:text-gray-300">This is a description for section 3.</p>
            </div>
        </div>
    </div>
</section>

Компоненты улучшения навигации

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

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

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-screen-lg mx-auto transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">My Website</h1>
        </div>
        <div class="space-x-4 hidden md:flex">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Services</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:flex md:items-center mt-4 space-x-4 hidden">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 shadow-md">
        <span class="text-gray-800 dark:text-white">User Name</span>
    </div>
</nav>

<!-- Mobile Menu -->
<div class="md:hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mt-2 transition-all duration-300 ease-in-out">
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 mb-2">Services</a>
    <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: white;
        }
    }
</style>

Компоненты улучшения навигации

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

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

                <nav class="bg-white dark:bg-gray-800 p-6">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
      <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
    </div>
    <ul class="flex space-x-6">
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#home">Home</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#about">About</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#services">Services</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
  <div class="bg-gray-300 dark:bg-gray-700 my-6">
    <img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
  </div>
  <div class="container mx-auto py-6">
    <h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg"> 
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
      </div>
    </div>
  </div>
  <footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
    <p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
  </footer>
</nav>