レトロキャンディーの目次
キャンディーにインスパイアされた配色のノスタルジックなレトロをテーマにした目次コンポーネントは、食品やレストランのWebサイトに適しています。スムーズなスクロールインジケーターとダークモードのサポートを備えた「スティッキー」サイドバーのようなナビゲーションを備えています。
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>関連コンポーネント
目次コンポーネント - 3D アーストーン
ビジネスおよび企業のWebサイト向けの複雑な3Dにインスパイアされた目次コンポーネントで、アースカラーとダークモードのサポートによる完全な応答性を備えています。深みとエンゲージメントを提供するように設計されています。
Bauhaus_Retro_Photography_TOC
バウハウスのデザイン原則とレトロ/ビンテージカラーパレットに触発された、写真Webサイト用の複雑でレスポンシブな目次コンポーネント。幾何学的なフォルム、落ち着いた色、完全なダークモードのサポートが特徴で、フォトギャラリーやポートフォリオに最適です。