CCHub Logo CCHub Tailwind Collection
구성 요소 항행 레트로 빈티지 내비게이션 컴포넌트

레트로 빈티지 내비게이션 컴포넌트

80년대/90년대 스타일에서 영감을 받은 레트로/빈티지 미학으로 디자인된 반응형 내비게이션 구성 요소로, 파스텔 색상 구성표가 특징입니다. 다크 모드 지원을 포함한 소셜 미디어 인터페이스에 적합합니다.

미리 보기

HTML 코드 

<nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>

관련 구성 요소

Bauhaus Jewel Tone 내비게이션

기하학적 형태와 보석 톤을 가진 간단하고 기능적인 탐색 구성 요소로, 예약/예약 시스템을 위해 설계되었습니다. 반응성 및 다크 모드 지원이 특징입니다.

열다

Neumorphism Navigation 컴포넌트

Neumorphism Navigation Component는 포트폴리오 웹 사이트에 최적화되어 있습니다. 여러 대화형 요소가 있는 복잡한 레이아웃, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다. 색 구성표는 유사합니다.

열다

3D_Candy_Finance_Navigation

금융/뱅킹 애플리케이션을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 캔디/달콤한 색 구성표와 미묘한 3D 디자인 요소를 특징으로 하며 다크 모드를 지원합니다.

열다