레트로 소셜 미디어 내비게이션

소셜 미디어를 위한 다크 모드가 있는 반응형 내비게이션 구성 요소(레트로/빈티지, 어스 톤, 중간 복잡성)

미리 보기

HTML 코드

<nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

레트로 소셜 미디어 내비게이션

미리 보기

HTML 코드

관련 구성 요소

스큐어모픽 내비게이션

Navigation 구성 요소

스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)