카테고리

구성 요소 Navigation Enhancement 구성 요소

Navigation Enhancement 구성 요소

웹사이트 탐색을 개선하는 고급 구성 요소

Navigation Enhancement 구성 요소

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>

Navigation Enhancement 구성 요소

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>

Navigation Enhancement 구성 요소

다크 모드 지원 및 반응형 디자인을 갖춘 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>

Navigation Enhancement 구성 요소

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>

Navigation Enhancement 구성 요소

스큐어모피즘(skeuomorphism)으로 설계된 내비게이션 컴포넌트로, 현실 세계의 요소를 모방한 디지털 요소를 특징으로 합니다. 반응형 효과와 어두운 테마를 지원하는 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>

Navigation Enhancement 구성 요소

브루탈리즘(Brutalism) 미학으로 디자인된 내비게이션 컴포넌트로, 대담한 디자인, 높은 대비, 특이한 레이아웃을 특징으로 합니다. 반응형 효과가 포함되어 있으며 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>