사이드바 구성 요소
전자상거래 애플리케이션용으로 설계된 반응형 사이드바 구성 요소로, 머티리얼 디자인 요소와 파스텔 색상 구성표가 있으며 다크 모드를 지원합니다.
HTML 코드
<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
<div class="flex items-center mb-5">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
</div>
<nav>
<ul>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
</li>
<li class="mb-3">
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
</li>
<li>
<a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
</li>
</ul>
</nav>
<div class="mt-5">
<h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
<div class="mt-3">
<img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
<img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
</div>
</div>
</aside>관련 구성 요소
사이드바 구성 요소
Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 사이드바 구성 요소입니다. 미묘한 그림자가 있는 부드러운 UI 모양이 특징이며 어두운 모드를 지원하며 자리 표시자 이미지와 아바타가 포함되어 있습니다.
Simple Vibrant Blog 사이드바
블로그 콘텐츠를 위한 간단하고 반응형이 빠른 사이드바 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 재질과 같은 느낌으로 디자인되었습니다. 탐색 링크와 사용자 프로필 섹션이 포함되어 있습니다. Tailwind의 dark: 접두사를 사용하여 다크 모드를 지원합니다. 큰 화면에서는 고정되고 작은 화면에서는 숨겨집니다.