CCHub Logo CCHub Tailwind Collection
구성 요소 항행 Retro Navigation 구성 요소

Retro Navigation 구성 요소

80년대/90년대의 빈티지 미학이 가미된 레트로 스타일의 내비게이션 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">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" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

관련 구성 요소

바우하우스 날씨 내비게이션

날씨 및 기후 애플리케이션을 위한 반응형 내비게이션 구성 요소로, 바우하우스에서 영감을 받은 디자인, 기하학적 형태, 차분한 색상 및 완전한 다크 모드 지원을 특징으로 합니다.

열다

Responsive Navigation 구성 요소

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity(마이크로인터랙션, 그레이스케일 색 구성표, 단순 복잡성).

열다

Glassmorphism Navigation 컴포넌트

전자 상거래 사이트를 위한 glassmorphism 스타일의 탐색 구성 요소로, 단색 색상, 반응형 디자인 및 Tailwind CSS를 사용한 다크 모드 지원을 특징으로 합니다.

열다