Breadcrumb Navigation 구성 요소
Tailwind CSS를 사용하여 만든 다크 모드를 지원하는 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소입니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
<ol class="list-reset flex items-center space-x-2">
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Home
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Category
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<span class="text-gray-400 dark:text-gray-600">
Sub-category
</span>
</li>
</ol>
</nav>
<style>
/* Neumorphism Styling */
.bg-white {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}
.dark .bg-gray-800 {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
}
a {
transition: all 0.3s ease;
}
</style>관련 구성 요소
Breadcrumb Navigation 구성 요소
Tailwind CSS를 사용하여 구축된 파스텔 색 구성표 및 어두운 테마 지원과 함께 Neumorphism 디자인 스타일을 활용하는 반응형 이동 경로 탐색 구성 요소입니다.
Breadcrumb Navigation 구성 요소
glassmorphism 디자인 스타일과 함께 Tailwind CSS를 사용하는 반응형 이동 경로 탐색 구성 요소입니다. 흐릿한 유리 같은 배경이 특징이며, 어두운 테마를 지원하고, 자리 표시자 이미지를 포함합니다.
Breadcrumb Navigation 구성 요소
Material Design 및 Tailwind CSS로 스타일링된 반응형 이동 경로 탐색 구성 요소로, 어두운 테마 지원과 트라이어딕 색 구성표가 특징입니다.