Simple Vibrant Blog 사이드바
블로그 콘텐츠를 위한 간단하고 반응형이 빠른 사이드바 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 재질과 같은 느낌으로 디자인되었습니다. 탐색 링크와 사용자 프로필 섹션이 포함되어 있습니다. Tailwind의 dark: 접두사를 사용하여 다크 모드를 지원합니다. 큰 화면에서는 고정되고 작은 화면에서는 숨겨집니다.
HTML 코드
<!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
<!-- Sidebar Header -->
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
<span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
</div>
<!-- Navigation -->
<nav class="space-y-2">
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Home
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Categories
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Popular
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
About
</a>
</nav>
<!-- User Profile (Optional) - Position at bottom -->
<div class="absolute bottom-5 left-5 right-5">
<div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
<span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
</div>
</div>
</div>
</div>관련 구성 요소
Healthcare Sidebar 구성 요소
의료 애플리케이션을 위한 복잡하고 미니멀하며 반응이 빠른 사이드바 구성 요소로, 유사한 색 구성표와 다크 모드 지원을 특징으로 합니다. 탐색, 사용자 프로필 및 빠른 링크가 포함됩니다.