Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con morfismo de vidrio, con un efecto translúcido y desenfoque similar al vidrio esmerilado para un portafolio que muestra trabajos o productos. Admite un tema oscuro y utiliza colores complementarios mientras mantiene una complejidad moderada.
Código HTML
<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>Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio neumórfico con diseño responsivo y compatibilidad con el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio simple y vibrante inspirado en 3D para carteras, con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de mapa del sitio
Un componente de mapa del sitio receptivo diseñado para el modo oscuro con colores pastel, adecuado para tableros.