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>관련 구성 요소
Table of Contents 컴포넌트 - 3D Earth Tones
비즈니스 및 기업 웹 사이트를 위한 복잡한 3D에서 영감을 받은 목차 구성 요소로, 어스 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 깊이와 몰입도를 제공하도록 설계되었습니다.
Table of Contents 구성 요소
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 목차 구성 요소. 이 구성 요소는 포트폴리오 목적으로 설계되었으며, 단색 색 구성표와 JavaScript가 없는 적당한 복잡성 수준을 특징으로 합니다.