구성 요소 탐색 모음 레트로/빈티지 소셜 미디어 네비게이션 바

레트로/빈티지 소셜 미디어 네비게이션 바

Retro/Vintage Navigation Bar for Social Media with Analogous color scheme, Simple complexity, responsive, and dark theme support. 레트로/빈티지 네비게이션 바.

미리 보기

HTML 코드

<nav class="bg-gradient-to-r from-purple-700 via-pink-500 to-red-500 p-4 shadow-lg dark:from-purple-900 dark:via-pink-700 dark:to-red-700">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold font-retro">SocialFlow</div>
    <div class="space-x-4">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Feed</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Friends</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Messages</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Profile</a>
    </div>
    <div class="flex items-center space-x-4">
      <button class="text-white focus:outline-none dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
        <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z"></path></svg>
      </button>
    </div>
  </div>
</nav>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  .font-retro {
    font-family: 'Press Start 2P', cursive;
  }
</style>

관련 구성 요소

Navigation Bar 구성 요소

매력적인 마이크로 인터랙션이 있는 반응형 탐색 모음으로, 전자 상거래를 위해 설계되었으며, 어두운 테마와 흙색 색상을 사용합니다.

열다

Artsy_Neon_Crypto_Navbar

암호화폐/블록체인 애플리케이션을 위한 복잡하고 반응이 빠른 탐색 모음으로, 예술적인 수채화에서 영감을 받은 디자인과 밝은 네온 색상 구성표가 있습니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

럭셔리TravelNavBar

여행 및 관광 웹사이트를 위한 간단하고 우아한 탐색 모음 구성 요소로, 고급스러운 흙색, 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다