Componente de mapa del sitio
Componente de mapa del sitio con diseño minimalista / plano, efectos responsivos y soporte para temas oscuros.
Código HTML
<footer class='bg-white dark:bg-gray-900'>
<div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
<div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>About Us</a>
<a href='#' class='hover:opacity-75'>Careers</a>
<a href='#' class='hover:opacity-75'>Contact Us</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Web Development</a>
<a href='#' class='hover:opacity-75'>Mobile Development</a>
<a href='#' class='hover:opacity-75'>SEO Optimization</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Privacy Policy</a>
<a href='#' class='hover:opacity-75'>Terms of Service</a>
<a href='#' class='hover:opacity-75'>Cookie Policy</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Facebook</a>
<a href='#' class='hover:opacity-75'>Twitter</a>
<a href='#' class='hover:opacity-75'>Instagram</a>
</nav>
</div>
</div>
<div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
<p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
© 2024 Your Company. All rights reserved.
</p>
</div>
</div>
</footer>Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con morfismo de vidrio, con un efecto translúcido y desenfoque similar al vidrio esmerilado para un portafolio que muestra trabajos o productos. Admite un tema oscuro y utiliza colores complementarios mientras mantiene una complejidad moderada.
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.
Componente de mapa del sitio
Un componente de mapa del sitio receptivo diseñado para el modo oscuro con colores pastel, adecuado para tableros.