Componente de mapa del sitio
Un componente de mapa del sitio diseñado en un estilo brutalista con un tema oscuro, ideal para sitios web comerciales profesionales. Presenta un diseño audaz con elementos interactivos y de alto contraste.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
<h2 class="text-3xl font-bold mb-4">Site Map</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">About Us</h3>
<p class="text-gray-300">Learn more about our company and values.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">Services</h3>
<p class="text-gray-300">Explore the services we offer to our clients.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">Contact</h3>
<p class="text-gray-300">Get in touch with us for inquiries.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">Blog</h3>
<p class="text-gray-300">Read our latest articles and updates.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">FAQ</h3>
<p class="text-gray-300">Find answers to common questions.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-xl font-semibold mb-2">Careers</h3>
<p class="text-gray-300">Join our team and grow your career with us.</p>
</div>
</div>
<div class="mt-6 border-t border-gray-600 pt-4">
<h3 class="text-xl font-bold mb-2">Team</h3>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400">CEO</p>
</div>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400">CTO</p>
</div>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-semibold">Mike Johnson</p>
<p class="text-gray-400">CFO</p>
</div>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/4.jpg" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-semibold">Emily Davis</p>
<p class="text-gray-400">CMO</p>
</div>
</div>
</div>
</div>
<div class="mt-6 border-t border-gray-600 pt-4">
<h3 class="text-xl font-bold mb-2">Resources</h3>
<a href="#" class="text-blue-400 hover:underline">Documentation</a><br>
<a href="#" class="text-blue-400 hover:underline">Sitemap</a><br>
<a href="#" class="text-blue-400 hover:underline">Support</a>
</div>
</div>Componentes relacionados
Componente de mapa del sitio Glassmorphism
Un componente de mapa del sitio responsivo con un diseño de cristal, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales y corporativos.
Componente de mapa del sitio
Un componente de mapa del sitio de estilo 3D con diseño responsivo y compatibilidad con el modo oscuro. Cuenta con elementos tridimensionales para mayor profundidad y compromiso, utilizando imágenes y avatares de marcadores de posición aleatorios.
Neumorfismo Vibrante Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo diseñado con un estilo neumórfico y un esquema de colores vibrantes, adecuado para documentación o sitios wiki. Incluye soporte para modo oscuro.