뉴모픽 스포츠 브레드크럼
스포츠/피트니스 애플리케이션용으로 설계된 복잡한 뉴모픽 이동 경로 탐색 구성 요소로, 풍부한 보석 톤과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.
HTML 코드
<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-24 md:min-h-32 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
<li>
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
<svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
</li>
<li class="flex items-center">
<svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark group-hover:block">
<img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Team Avatar" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
Athletics
</a>
</li>
<li class="flex items-center">
<svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-sapphire-700 dark:focus:ring-sapphire-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
<svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.472 2.72L14.75 5.442S13.435 7.15 11.25 7.203c-2.185.053-4.22-.924-4.22-.924S5.105 5.56 5.105 5.56L2.38 2.76A1 1 0 00.91 3.94l2.72 2.72c.983.983 2.87.983 2.87.983s-1.84.455-2.61.026a1 1 0 00-1.378 1.464l.6.6a1 1 0 001.4-.04c.77-.43 2.76 1.48 2.76 1.48s1.603 1.15 2.8 1.15c.57 0 1.1-.115 1.57-.31L16.06 17.5a1 1 0 001.41-1.41L11.53 10.74c.2-.47.31-1 .31-1.57 0-1.2-.4-2.22-1.15-2.8l1.48-1.48c.04.04.08.08.12.11l2.76 2.76a1 1 0 001.41-1.41l-2.72-2.72c-.983-.983-.983-2.87-.983-2.87s.455 1.84.026 2.61a1 1 0 001.464 1.378l.6-.6a1 1 0 00-.04-1.4C16.92 4.69 17.472 2.72 17.472 2.72zM15 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Teams
</a>
</li>
<li class="flex items-center">
<svg class="flex-shrink-0 w-4 h-4 text-sapphire-600 dark:text-sapphire-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="flex items-center text-ruby-700 dark:text-ruby-300 px-3 py-1 text-sm sm:text-base font-bold cursor-default shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark rounded-full">
<img src="https://picsum.photos/id/1018/25/25" alt="Team Logo" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
Griffins Squad
</span>
</li>
</ol>
</nav>
<style>
/* Base light mode shadows */
.shadow-inner-neumorphic-light {
box-shadow: inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff;
}
.shadow-outer-neumorphic-light {
box-shadow: 5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff;
}
/* Base dark mode shadows */
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568;
}
.dark .shadow-outer-neumorphic-dark {
box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #4a5568;
}
/* Jewel Tone Theme Colors (Examples - extend as needed in tailwind.config.js) */
.text-emerald-700 { color: #047857; }
.dark .text-emerald-300 { color: #6ee7b7; }
.hover\:text-emerald-900:hover { color: #064e3b; }
.dark .hover\:text-emerald-100:hover { color: #ecfdf5; }
.focus\:ring-emerald-700:focus { --tw-ring-color: #047857; }
.dark .focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }
.text-emerald-600 { color: #059669; }
.dark .text-emerald-400 { color: #34d399; }
.text-sapphire-700 { color: #1d4ed8; }
.dark .text-sapphire-300 { color: #93c5fd; }
.hover\:text-sapphire-900:hover { color: #1e3a8a; }
.dark .hover\:text-sapphire-100:hover { color: #eff6ff; }
.focus\:ring-sapphire-700:focus { --tw-ring-color: #1d4ed8; }
.dark .focus\:ring-sapphire-300:focus { --tw-ring-color: #93c5fd; }
.text-sapphire-600 { color: #2563eb; }
.dark .text-sapphire-400 { color: #60a5fa; }
.text-ruby-700 { color: #b91c1c; }
.dark .text-ruby-300 { color: #fca5a5; }
/* Background gradient Adjustments */
.from-emerald-50 { background-image: linear-gradient(to bottom right, #effdf5, var(--tw-gradient-to, #d1fae5)); /* Tailwind default */}
.to-teal-100 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #f0fdf4), #ccfbf1); /* Tailwind default */}
.dark .from-gray-800 { background-image: linear-gradient(to bottom right, #2d3748, var(--tw-gradient-to, #2c313a)); /* Tailwind default */}
.dark .to-gray-950 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #1a202c), #0f172a); /* Tailwind default */}
/* Note: For full control and proper dark mode color overriding, define custom color palettes in tailwind.config.js */
/* Example tailwind.config.js extension */
/*
module.exports = {
darkMode: 'class',
theme: {
extend: {
colors: {
emerald: {
50: '#effdf5',
100: '#d1fae5',
300: '#6ee7b7',
400: '#34d399',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b'
},
sapphire: {
50: '#eff6ff',
100: '#dbeafe',
300: '#93c5fd',
400: '#60a5fa',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a'
},
ruby: {
50: '#fef2f2',
100: '#fee2e2',
300: '#fca5a5',
400: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d'
}
},
boxShadow: {
'inner-neumorphic-light': 'inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff',
'outer-neumorphic-light': '5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff',
'inner-neumorphic-dark': 'inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568',
'outer-neumorphic-dark': '5px 5px 10px #1a202c, -5px -5px 10px #4a5568'
}
}
}
}
*/
</style>관련 구성 요소
Breadcrumb Navigation 구성 요소
glassmorphism 디자인 스타일과 함께 Tailwind CSS를 사용하는 반응형 이동 경로 탐색 구성 요소입니다. 흐릿한 유리 같은 배경이 특징이며, 어두운 테마를 지원하고, 자리 표시자 이미지를 포함합니다.
Memphis_Rainbow_Breadcrumb_Navigation
블로그/콘텐츠 사이트에 적합한 다색 무지개 그라데이션을 특징으로 하는 대담한 Memphis Design 미학을 갖춘 간단하고 반응이 빠른 이동 경로 탐색 구성 요소입니다. 다크 모드 지원이 포함됩니다.
Breadcrumb Navigation 구성 요소
블로그/콘텐츠 목적을 위한 레트로/빈티지 디자인, 생생한 색 구성표 및 단순 복잡성 수준을 갖춘 이동 경로 탐색 구성 요소.