레트로 캔디 목차
향수를 불러일으키는 복고풍 테마의 목차 구성 요소로, 사탕에서 영감을 받은 색 구성표가 있어 음식 및 레스토랑 웹사이트에 적합합니다. 부드러운 스크롤 표시기와 다크 모드 지원이 있는 '고정' 사이드바와 같은 탐색 기능이 있습니다.
HTML 코드
<div class="font-sans bg-amber-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 sm:p-6 md:p-8 relative overflow-x-hidden">
<!-- Retro Border Top -->
<div class="hidden md:block absolute top-0 left-0 w-full h-4 bg-gradient-to-r from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>
<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-8 lg:gap-12 relative z-20">
<!-- Table of Contents Sidebar -->
<nav class="md:w-1/4 lg:w-1/5 flex-shrink-0 relative">
<div class="sticky top-8 lg:top-12 p-5 md:p-6 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 transform -rotate-1 skew-x-1 origin-top-left">
<div class="relative p-2 md:p-3 bg-gradient-to-br from-yellow-100 to-green-100 dark:from-yellow-700 dark:to-green-700 rounded-2xl border-dashed border-2 border-green-500 dark:border-green-400">
<h3 class="text-2xl lg:text-3xl font-extrabold text-purple-800 dark:text-yellow-100 mb-4 text-center font-serif tracking-wider transform rotate-1 scale-105">
Sweet Eats Menu
</h3>
<ul class="space-y-3">
<li>
<a href="#appetizers" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
<span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">★</span> Appetizers
</a>
</li>
<li>
<a href="#main-courses" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
<span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">☀</span> Main Courses
</a>
</li>
<li>
<a href="#desserts" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
<span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">❤</span> Desserts
</a>
</li>
<li>
<a href="#drinks" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
<span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">☕</span> Drinks
</a>
</li>
<li>
<a href="#specials" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
<span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">🍬</span> Chef's Specials
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="md:flex-1 p-5 md:p-8 bg-gradient-to-br from-mint-green-100 to-blue-100 dark:from-mint-green-800 dark:to-blue-800 rounded-3xl shadow-2xl border-4 border-mint-green-400 dark:border-mint-green-600 transform rotate-1 skew-y-1 origin-top-right">
<div class="relative bg-white dark:bg-gray-800 p-6 md:p-8 rounded-2xl shadow-inner border-dashed border-2 border-blue-500 dark:border-blue-400">
<h2 id="appetizers" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
Appetizers <span class="text-pink-500 text-5xl dark:text-pink-400">★</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=1" alt="Crispy Spring Rolls" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Crispy Spring Rolls</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Golden fried vegetarian spring rolls served with sweet chili sauce. A classic!</p>
</div>
<div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=2" alt="Spicy Nacho Bites" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Spicy Nacho Bites</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Miniature nacho bites loaded with jalapeños, cheddar, and guacamole.</p>
</div>
</div>
<h2 id="main-courses" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-top-right">
Main Courses <span class="text-pink-500 text-5xl dark:text-pink-400">☀</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=3" alt="Mushroom & Truffle Pasta" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Mushroom & Truffle Pasta</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Homemade tagliatelle with wild mushrooms and a rich black truffle sauce.</p>
</div>
<div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=4" alt="Honey Glazed Salmon" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Honey Glazed Salmon</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Pan-seared salmon fillet with a sweet honey glaze, served with roasted vegetables.</p>
</div>
</div>
<h2 id="desserts" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-bottom-left">
Desserts <span class="text-pink-500 text-5xl dark:text-pink-400">❤</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=5" alt="Rainbow Swirl Cake" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Rainbow Swirl Cake</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Layers of vanilla cake with vibrant rainbow frosting. Pure joy!</p>
</div>
<div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=6" alt="Bubblegum Ice Cream" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Bubblegum Ice Cream</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Classic bubblegum flavored ice cream with real candy pieces. Nostalgia in a scoop!</p>
</div>
</div>
<h2 id="drinks" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-bottom-right">
Drinks <span class="text-pink-500 text-5xl dark:text-pink-400">☕</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=7" alt="Retro Soda Floats" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Retro Soda Floats</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">Your choice of classic soda topped with a generous scoop of vanilla ice cream.</p>
</div>
<div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=8" alt="Cotton Candy Milkshake" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Cotton Candy Milkshake</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">A whimsical milkshake blend with real cotton candy swirls and sprinkles.</p>
</div>
</div>
<h2 id="specials" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
Chef's Specials <span class="text-pink-500 text-5xl dark:text-pink-400">🍬</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=9" alt="Grandma's Meatloaf" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Grandma's Meatloaf</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">A heartwarming classic, just like grandma used to make. Served with mashed potatoes.</p>
</div>
<div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/400/250?random=10" alt="Mystery Box Dessert" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
<h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Mystery Box Dessert</h3>
<p class="text-lg text-gray-600 dark:text-gray-300">A surprise dessert creation from our chef, changes daily! Ask your server.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Retro Border Bottom -->
<div class="hidden md:block absolute bottom-0 right-0 w-full h-4 bg-gradient-to-l from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>
</div>관련 구성 요소
Table of Contents 구성 요소
머티리얼 디자인 스타일로 디자인된 간단한 목차 구성 요소로, 흙색을 활용하고 다크 모드를 지원합니다. 블로그의 콘텐츠 소비에 적합합니다.
Table of Contents 구성 요소
머티리얼 디자인에서 생생한 색상으로 스타일링된 반응형 목차 구성요소로, 다크 모드 지원 및 여러 대화형 요소를 포함하여 블로그 및 콘텐츠 소비에 적합합니다.
Table of Contents 구성 요소
Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 목차 구성요소로, 다크 모드를 지원하고 자리표시자 이미지와 아바타를 제공합니다.