Componente de mapa del sitio
Un componente de mapa del sitio responsivo diseñado en un estilo brutalista con un tema oscuro para sitios web comerciales / corporativos, que incorpora funciones interactivas.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-4">
<h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
<p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
<p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
<p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
<p class="text-gray-600 dark:text-gray-400">View our work.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
<p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
<p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
</li>
</ul>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
<div class="flex flex-wrap gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">CEO</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">CTO</p>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
</div>
</div>
</div>Componentes relacionados
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
Componente de mapa del sitio con diseño minimalista / plano, efectos responsivos y soporte para temas oscuros.
Componente de mapa del sitio
Un componente de mapa del sitio retro/vintage diseñado para interfaces de redes sociales, utilizando un esquema de color monocromático. Presenta un diseño simple con un tema oscuro para una mejor legibilidad y atractivo estético.