Sitemap-Komponente
Eine Retro-/Vintage-Sitemap-Komponente, die für Social-Media-Schnittstellen entwickelt wurde und ein monochromatisches Farbschema verwendet. Es verfügt über ein einfaches Layout mit einem dunklen Thema für bessere Lesbarkeit und Ästhetik.
HTML-Code
<div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
<h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
<ul class="list-disc list-inside space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Home</a>
<p class="text-gray-400 text-sm">Our homepage with latest updates</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Profile</a>
<p class="text-gray-400 text-sm">Your personal profile page</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Messages</a>
<p class="text-gray-400 text-sm">View your messages</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Settings</a>
<p class="text-gray-400 text-sm">Manage your account settings</p>
</div>
</li>
</ul>
<div class="mt-6">
<h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
</div>
</div>
</div>Verwandte Komponenten
Sitemap-Komponente
Responsive Sitemap-Komponente mit Unterstützung des Dunkelmodus für E-Commerce. Verwendet Tailwind CSS für das Styling. Folgt dem analogen Farbschema. Bilder von picsum.photos.
Sitemap-Komponente
Eine reaktionsschnelle Sitemap-Komponente, die für den Dunkelmodus mit Pastellfarben entwickelt wurde und für Dashboards geeignet ist.
Sitemap-Komponente
Eine reaktionsschnelle Siteübersichtskomponente, die nach Material Design-Prinzipien entwickelt wurde und rasterbasierte Layouts, Schatten und Unterstützung für den Dunkelmodus bietet.