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.
Código HTML
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen">
<div class="container mx-auto">
<h1 class="text-4xl font-bold mb-8 text-center dark:text-white text-gray-800">Site Map</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1: About Me -->
<div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-purple-700 dark:to-pink-700">
<h2 class="text-2xl font-semibold mb-4 text-white">About Me</h2>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Introduction</a></li>
<li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Skills</a></li>
<li><a href="#" class="text-white hover:text-purple-200 transition-colors duration-200 block">Experience</a></li>
</ul>
</div>
<!-- Section 2: Portfolio -->
<div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-green-600 dark:to-blue-600">
<h2 class="text-2xl font-semibold mb-4 text-white">Portfolio</h2>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Web Design</a></li>
<li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Graphic Design</a></li>
<li><a href="#" class="text-white hover:text-green-100 transition-colors duration-200 block">Photography</a></li>
</ul>
</div>
<!-- Section 3: Blog -->
<div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-yellow-600 dark:to-orange-600">
<h2 class="text-2xl font-semibold mb-4 text-white">Blog</h2>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Latest Posts</a></li>
<li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Categories</a></li>
<li><a href="#" class="text-white hover:text-yellow-100 transition-colors duration-200 block">Archive</a></li>
</ul>
</div>
<!-- Section 4: Services (Example) -->
<div class="bg-gradient-to-br from-red-500 to-orange-600 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-red-700 dark:to-orange-700">
<h2 class="text-2xl font-semibold mb-4 text-white">Services</h2>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Consulting</a></li>
<li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Development</a></li>
<li><a href="#" class="text-white hover:text-red-200 transition-colors duration-200 block">Support</a></li>
</ul>
</div>
<!-- Section 5: Contact -->
<div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-lg shadow-xl p-6 transform hover:scale-105 transition-transform duration-300 dark:from-blue-800 dark:to-indigo-800">
<h2 class="text-2xl font-semibold mb-4 text-white">Contact</h2>
<ul class="space-y-2">
<li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Get in Touch</a></li>
<li><a href="#" class="text-white hover:text-blue-200 transition-colors duration-200 block">Social Media</a></li>
</ul>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con los principios de Material Design, con diseños basados en cuadrícula, sombras y compatibilidad con el modo oscuro.
Componente Mapa del Sitio - Finanzas Banca
Un componente de mapa del sitio simple y receptivo para interfaces financieras/bancarias, con una interfaz de usuario de modo oscuro con tonos sepia/marrón. Optimizado para computadoras de escritorio, tabletas y dispositivos móviles, con soporte completo para el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio responsivo con una estética de Material Design, combinación de colores pastel y soporte para el modo oscuro, adecuado para plataformas de citas / sociales.