Site Map Component
A complex site map component implementing skeuomorphism design style with earth tones color scheme, supporting a dark theme. Designed for blog/content purposes with interactive elements, using Tailwind CSS.
HTML Code
<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>Related Components
Site Map Component
A responsive site map component designed with glassmorphism, featuring a frosted glass-like translucent effect and blur for a portfolio showcasing work or products. It supports a dark theme and utilizes complementary colors while maintaining a moderate complexity.
Site Map Component
A Site Map Component designed with Material Design principles using Tailwind CSS, featuring responsive layouts, animations, and dark theme support.
Site Map Component
Responsive Site Map Component with Dark Mode support for E-commerce. Uses Tailwind CSS for styling. Follows Analogous color scheme. Images from picsum.photos.