Componente de mapa del sitio
Un componente de mapa del sitio diseñado con los principios de Material Design utilizando Tailwind CSS, con diseños responsivos, animaciones y compatibilidad con temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg"> <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Site Map</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li> </ul> </div> <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3> <ul class="mt-2"> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li> <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li> </ul> </div> </div> <div class="mt-8"> <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3> <div class="flex space-x-4 mt-2"> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full"> </div> <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow"> <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full"> </div> </div> </div></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 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.
Componente de mapa del sitio
Un componente de mapa del sitio al estilo de Material Design para interfaces de redes sociales, con capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS. Incorpora tonos tierra y complejidad media para plataformas de redes sociales.