Sitemap-Komponente
Eine responsive Sitemap-Komponente, die mit Glasmorphismus gestaltet wurde und einen mattglasähnlichen durchscheinenden Effekt und eine Unschärfe für ein Portfolio bietet, in dem Arbeiten oder Produkte präsentiert werden. Es unterstützt ein dunkles Thema und verwendet Komplementärfarben, während es eine moderate Komplexität beibehält.
HTML-Code
<div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
</div>
</div>
</div>
<footer class="text-center text-gray-600 dark:text-gray-400">
<p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
<p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
</footer>
</div>Verwandte Komponenten
Sitemap-Komponente
Eine Siteübersichtskomponente im 3D-Stil mit responsivem Design und Unterstützung für den Dunkelmodus. Es verfügt über dreidimensionale Elemente für Tiefe und Engagement, wobei zufällige Platzhalterbilder und Avatare verwendet werden.
Sitemap-Komponente
Eine Sitemap-Komponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen.
Sitemap-Komponente
Eine reaktionsschnelle Sitemap-Komponente mit Mikrointeraktionen, Pastell-Farbschema und Unterstützung für dunkle Themen, die für E-Commerce-Websites geeignet ist. Es enthält eine Kopfzeile, eine Suchleiste und mehrere Kategorien mit Links.