Table of Contents 구성 요소
3D 디자인 느낌의 단순하고 생생하며 반응이 빠른 목차 구성 요소로, 다크 모드 지원을 포함하여 여행/관광 웹사이트에 적합합니다.
HTML 코드
<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
<nav class="w-full max-w-sm lg:max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 animate-fade-in-up transition-all duration-300 hover:shadow-2xl dark:shadow-sky-900 dark:shadow-md" style="transform-style: preserve-3d;">
<div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white shadow-md transform translateZ-20 relative z-10 rounded-t-3xl">
<h2 class="text-2xl lg:text-3xl font-extrabold tracking-tight drop-shadow-lg text-center">
Your Adventure Guide
</h2>
<p class="text-sm lg:text-base text-gray-100 mt-1 opacity-90 text-center">
Jump to your next destination.
</p>
</div>
<ul class="p-6 lg:p-8 space-y-4 lg:space-y-5 relative z-0 before:absolute before:left-10 before:top-0 before:bottom-0 before:w-1 before:bg-gradient-to-b before:from-purple-300 before:via-pink-300 before:to-yellow-300 dark:before:from-purple-700 dark:before:via-pink-700 dark:before:to-yellow-600 before:rounded-full before:shadow-inner">
<li class="relative group">
<a href="#overview" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
1
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Overview</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Explore the highlights.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#destinations" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-pink-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-pink-500 dark:bg-pink-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
2
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Top Destinations</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Find your next journey.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-pink-400 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors" 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="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#activities" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-yellow-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
3
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Activities Guide</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Fun things to do.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-yellow-400 dark:text-yellow-300 group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors" 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="M9 5l7 7-7 7"></path></svg>
</a>
</li>
<li class="relative group">
<a href="#booking" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
<span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
4
</span>
<div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
<h3 class="font-semibold text-lg lg:text-xl">Booking Info</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Plan your trip.</p>
</div>
<svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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="M9 5l7 7-7 7"></path></svg>
</a>
</li>
</ul>
<div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white text-center text-sm lg:text-base rounded-b-3xl transform translateZ-20 relative z-10 shadow-inner mt-4">
<p>Start your incredible journey today!</p>
</div>
</nav>
<style>
/* Custom 3D-like transformations (simulated using Tailwind's transform utilities) */
.perspective-1000 { perspective: 1000px; }
.rotateX-3 { transform: rotateX(3deg); }
.perspective-600 { perspective: 600px; }
.translateZ-10 { transform: translateZ(10px); }
.translateZ-20 { transform: translateZ(20px); }
.rotateX-2 { transform: rotateX(2deg); }
/* Keyframe animation for initial fade-in and subtle 3D lift */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px) rotateX(10deg) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) rotateX(3deg) scale(1);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out forwards;
}
/* Ensure smooth transitions for transform properties */
.transform {
transition-property: transform, background-color, box-shadow, color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>
</div>관련 구성 요소
바우하우스 메디컬 목차
의료/헬스케어 애플리케이션을 위한 복잡하고 반응이 빠른 목차 구성 요소로, Bauhaus에서 영감을 받은 기능적 디자인과 차분한 색상과 다크 모드를 지원합니다. 탐색, 검색 및 섹션 링크를 포함합니다.
Table of Contents 구성 요소
머티리얼 디자인 스타일로 디자인된 간단한 목차 구성 요소로, 흙색을 활용하고 다크 모드를 지원합니다. 블로그의 콘텐츠 소비에 적합합니다.
3D 목차 구성 요소
전자 상거래를 위해 설계된 반응형 목차 구성 요소로, 3D 디자인 요소와 보색 구성표를 특징으로 합니다. 여기에는 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.