目次コンポーネント - 3D アーストーン
ビジネスおよび企業のWebサイト向けの複雑な3Dにインスパイアされた目次コンポーネントで、アースカラーとダークモードのサポートによる完全な応答性を備えています。深みとエンゲージメントを提供するように設計されています。
HTMLコード
<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto py-8 lg:py-16">
<h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 lg:mb-16 tracking-tight text-stone-800 dark:text-stone-200 relative">
<span class="block">Table of Contents</span>
<span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-1 bg-amber-500 rounded-full mt-2"></span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- TOC Item 1 -->
<a href="#introduction" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-amber-400 dark:bg-amber-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253s3.332.477 4.5 1.253m-9 0V14m0-7a3 3 0 013 3v2m0 0l-1.477 1.477L9 16m4-4s-1.143-2-3-2m9 0a3 3 0 013 3v2m0 0l-1.477 1.477L21 16m-4-4c-1.143 2-3 2-3 2s-1.143 0-3-2"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">1. Introduction</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Overview of our mission and values.</p>
<span class="mt-4 inline-block px-4 py-2 bg-amber-500 dark:bg-amber-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-amber-600 dark:group-hover:bg-amber-800 transition-colors duration-200">Read More</span>
</div>
</div>
</a>
<!-- TOC Item 2 -->
<a href="#company-history" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-green-500 dark:bg-green-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">2. Company History</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Key milestones and growth journey.</p>
<span class="mt-4 inline-block px-4 py-2 bg-green-600 dark:bg-green-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-green-700 dark:group-hover:bg-green-900 transition-colors duration-200">Explore Past</span>
</div>
</div>
</a>
<!-- TOC Item 3 -->
<a href="#our-services" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M21 13.255v-2.189a1.125 1.125 0 011.125-1.125h.875a.875.875 0 00.875-.875V7a.875.875 0 00-.875-.875H22a1.125 1.125 0 01-1.125-1.125V4.255a1.125 1.125 0 00-1.125-1.125H16.89M12 17.5a4.5 4.5 0 110-9 4.5 4.5 0 010 9zM12 17.5V21M12 6.5V3"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">3. Our Services</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Comprehensive solutions for your business.</p>
<span class="mt-4 inline-block px-4 py-2 bg-blue-600 dark:bg-blue-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-blue-700 dark:group-hover:bg-blue-900 transition-colors duration-200">View Offerings</span>
</div>
</div>
</a>
<!-- TOC Item 4 -->
<a href="#client-testimonials" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">4. Client Testimonials</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Hear from our satisfied clients.</p>
<span class="mt-4 inline-block px-4 py-2 bg-red-500 dark:bg-red-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-red-600 dark:group-hover:bg-red-800 transition-colors duration-200">Read Reviews</span>
</div>
</div>
</a>
<!-- TOC Item 5 -->
<a href="#our-team" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-purple-400 dark:bg-purple-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M17 20h-8a4 4 0 01-4-4v-1.586a1 1 0 01-.293-.707L4 12V6a2 2 0 012-2h12a2 2 0 012 2v6a2 2 0 01-2 2h-1m-7 8a4 4 0 100-8 4 4 0 000 8z"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">5. Our Team</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Meet the experts behind our success.</p>
<span class="mt-4 inline-block px-4 py-2 bg-purple-500 dark:bg-purple-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-purple-600 dark:group-hover:bg-purple-800 transition-colors duration-200">Meet Us</span>
</div>
</div>
</a>
<!-- TOC Item 6 -->
<a href="#contact-us" class="group block perspective-1000">
<div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-teal-500 to-teal-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
<div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-teal-400 dark:bg-teal-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
<svg class="w-8 h-8 text-white" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">6. Contact Us</h3>
<p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Get in touch for inquiries.</p>
<span class="mt-4 inline-block px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-teal-600 dark:group-hover:bg-teal-800 transition-colors duration-200">Contact Now</span>
</div>
</div>
</a>
</div>
</div>
<style>
/* Adding custom CSS for 3D transforms */
.perspective-1000 {
perspective: 1000px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.rotateY-5 {
transform: rotateY(5deg);
}
.rotateX-5 {
transform: rotateX(5deg);
}
.group-hover\:rotateY-5:hover {
transform: rotateY(5deg) scale(1.05);
}
.group-hover\:rotateX-5:hover {
transform: rotateX(5deg) scale(1.05);
}
.group-hover\:scale-105:hover {
transform: scale(1.05);
}
/* Combining for better 3D effect on hover */
.group-hover\:rotateY-5.group-hover\:rotateX-5.group-hover\:scale-105:hover {
transform: rotateY(5deg) rotateX(5deg) scale(1.05);
}
/* Z-axis transforms */
.translateZ-5 {
transform: translateZ(5px);
}
.translateZ-10 {
transform: translateZ(10px);
}
.translateZ-15 {
transform: translateZ(15px);
}
.translateZ-20 {
transform: translateZ(20px);
}
/* Inner shadow for '3D' depth */
.shadow-inner-xl {
box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
}
.dark\:shadow-inner-xl-dark {
box-shadow: inset 0 6px 12px rgba(255,255,255,0.05);
}
.shadow-xl-dark {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
/* Backface visibility to prevent flickering on 3D transforms */
.backface-hidden {
backface-visibility: hidden;
}
</style>
</div>関連コンポーネント
Table of Contents コンポーネント
glassmorphism デザインとパステル調の配色を備えたレスポンシブな目次コンポーネントで、データの視覚化とコントロール パネルを備えたダッシュボードに適しています。
レトロキャンディーの目次
キャンディーにインスパイアされた配色のノスタルジックなレトロをテーマにした目次コンポーネントは、食品やレストランのWebサイトに適しています。スムーズなスクロールインジケーターとダークモードのサポートを備えた「スティッキー」サイドバーのようなナビゲーションを備えています。
Table of Contents コンポーネント
Glassmorphism スタイルでデザインされたレスポンシブな目次コンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴で、Tailwind CSS で明るいテーマと暗いテーマの両方をサポートします。