CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 레트로사이드바내비게이션

레트로사이드바내비게이션

레트로/빈티지 스타일의 사이드바 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex h-screen">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-gray-100 retro-sidebar">
    <div class="p-4 text-2xl font-bold border-b border-gray-700 retro-title">Vaporwave Nav</div>
    <nav class="mt-4">
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💿 Tracks</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">📼 mixtapes</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item"> neon city</a>
      <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-700 transition duration-300 retro-nav-item">💾💾💾 save game</a>
    </nav>
  </div>

  <!-- Page Content -->
  <div class="flex-1 p-10 text-2xl font-bold">
    <h1 class="retro-main-title">Welcome to the Grid</h1>
    <p class="mt-4 text-base retro-text">Explore the digital landscape...</p>
      <img src="https://picsum.photos/seed/retroscape/800/600" alt="Retro landscape" class="mt-8 rounded-lg shadow-lg">
  </div>
</div>

<style>
.retro-sidebar {
  background: linear-gradient(145deg, #4a0e4a, #1a051a);
  font-family: 'Press Start 2P', cursive;
}

.retro-title {
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff, 0 0 20px #0ff;
}

.retro-nav-item {
  color: #0f0;
  text-shadow: 0 0 3px #0f0;
}

.retro-nav-item:hover {
  color: #ff0;
  text-shadow: 0 0 5px #ff0;
}

.retro-main-title {
    font-family: 'Press Start 2P', cursive;
    color: #f0f;
    text-shadow: 0 0 7px #f0f, 0 0 12px #f0f, 0 0 18px #f0f;
}

.retro-text {
    font-family: 'Press Start 2P', cursive;
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
}

@media (max-width: 768px) {
  .retro-sidebar {
    width: 100%;
    height: auto;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .retro-sidebar {
    background: linear-gradient(145deg, #1a051a, #4a0e4a);
  }
  .retro-title {
    color: #0f0;
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0;
  }
  .retro-nav-item {
    color: #0ff;
    text-shadow: 0 0 3px #0ff;
  }
  .retro-nav-item:hover {
    color: #f0f;
    text-shadow: 0 0 5px #f0f;
  }
  .retro-main-title {
      color: #0ff;
      text-shadow: 0 0 7px #0ff, 0 0 12px #0ff, 0 0 18px #0ff;
  }
  .retro-text {
      color: #f0f;
      text-shadow: 0 0 3px #f0f;
  }
}
</style>

관련 구성 요소

사이드바 탐색 구성 요소 - 농업/농업

농업/농업 웹사이트를 위해 설계된 복잡하고 미니멀한 사이드바 탐색 구성 요소입니다. 보석 같은 색조의 색상, 완전한 반응성, 다크 모드 지원, 농업 상황의 대시보드 및 관리 시스템에 적합한 여러 대화형 요소를 갖추고 있습니다.

열다

Glassmorphism 사이드바 탐색

포트폴리오를 위한 Glassmorphism 스타일의 반응형 사이드바 탐색 구성 요소로, 다크 모드 지원 및 유사한 색 구성표가 있습니다. 젖빛 유리 효과와 HTML 및 Tailwind CSS만 사용하는 여러 대화형 요소가 특징입니다.

열다

Brutalism 사이드바 탐색

Brutalism 디자인, 생생한 색 구성표 및 블로그/콘텐츠 목적을 위한 단순한 레이아웃을 갖춘 반응형 사이드바 탐색 구성 요소. 다크 모드 지원이 포함됩니다.

열다