Neumorphism Vibrant Site Map コンポーネント
ニューモーフィックスタイルと鮮やかな配色でデザインされたシンプルでレスポンシブなサイトマップコンポーネントで、ドキュメントやWikiサイトに適しています。ダークモードのサポートが含まれています。
HTMLコード
<div class="min-h-screen bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl p-6 sm:p-10 transition-all duration-300 ease-in-out
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),2px_2px_8px_rgba(0,0,0,0.4),-2px_-2px_8px_rgba(40,40,40,0.4)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,250,0.7),2px_2px_8px_rgba(150,150,250,0.3),-2px_-2px_8px_rgba(255,255,255,0.8)]">
<h2 class="text-3xl sm:text-4xl font-extrabold text-indigo-700 dark:text-purple-400 mb-8 sm:mb-12 text-center drop-shadow-lg">
Site Map
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
<!-- Category 1: Getting Started -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Getting Started</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Installation Guide</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Quick Start Tutorial</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Frequently Asked Questions</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">System Requirements</a></li>
</ul>
</div>
<!-- Category 2: Core Concepts -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Core Concepts</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Data Models</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Endpoints</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Authentication</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Error Handling</a></li>
</ul>
</div>
<!-- Category 3: Advanced Topics -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Advanced Topics</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Custom Integrations</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Performance Optimization</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Security Best Practices</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Migration Guides</a></li>
</ul>
</div>
<!-- Category 4: Resources -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Resources</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Reference</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Glossary of Terms</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Community Forum</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Support & Contact</a></li>
</ul>
</div>
<!-- Category 5: Release Notes -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Release Notes</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Latest Version</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Previous Versions</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Upcoming Features</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Bug Fixes</a></li>
</ul>
</div>
<!-- Category 6: Legal & Compliance -->
<div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
<h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Legal & Compliance</h3>
<ul class="space-y-3">
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Terms of Service</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Privacy Policy</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Cookie Policy</a></li>
<li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">DMCA Policy</a></li>
</ul>
</div>
</div>
</div>
</div>関連コンポーネント
Neumorphic_Industrial_Sitemap
工業および製造企業向けのレスポンシブなニューモーフィックサイトマップコンポーネントで、単色の配色とダークモードのサポートが特徴です。要素は、微妙な影を使用して背景から押し出されているように見えます。
ソーシャル メディア サイト マップ コンポーネント
セピア/ブラウンの色調とダークモードのサポートを備えたソーシャルメディアインターフェイス用のシンプルでレスポンシブなサイトマップコンポーネントで、微妙なホバーマイクロインタラクションが特徴です。
サイトマップコンポーネント
Tailwind CSS を使用してマテリアル デザインの原則に基づいて設計されたサイト マップ コンポーネントで、レスポンシブ レイアウト、アニメーション、ダーク テーマのサポートが特徴です。