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 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 de mapa del sitio
Un componente de mapa del sitio responsivo diseñado en modo oscuro con Tailwind CSS.
Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo para sitios de comercio electrónico con colores vibrantes y microinteracciones, y soporte para modo oscuro.