레트로 빈티지 내비게이션 컴포넌트
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>