サイトマップコンポーネント
アースカラーの配色でスキューモーフィズムデザインスタイルを実装し、ダークテーマをサポートする複雑なサイトマップコンポーネント。Tailwind CSSを使用して、インタラクティブな要素を備えたブログ/コンテンツ用に設計されています。
HTMLコード
<div class="bg-green-800 dark:bg-gray-900 p-8 rounded-lg shadow-lg space-y-6">
<h1 class="text-4xl font-bold text-white dark:text-gray-200">Site Map</h1>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Blog Sections</h2>
<ul class="space-y-2 mt-4">
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Home
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">About Us
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">Updated</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Contact
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Blog Posts
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">10</span>
</a>
</li>
</ul>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Featured Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=1" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 1</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=2" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 2</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
</div>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Team</h2>
<div class="flex space-x-4 mt-4">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">John Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">Jane Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
</div>
</div>
</div>