Componentes Navegación de pie de página Componente de navegación de pie de página

Componente de navegación de pie de página

Componente de navegación de pie de página para comercio electrónico con Material Design: un componente simple con soporte de modo responsivo y oscuro, con un esquema de color complementario.

Vista previa

Código HTML

<footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 Your E-commerce Store. All rights reserved.</p>
    </div>
  </div>
</footer>

Componentes relacionados

Componente de navegación de pie de página

Un componente de navegación de pie de página responsivo diseñado con un estilo esqueuomórfico, con elementos interactivos adecuados para el comercio electrónico. Sigue un esquema de color triádico y admite el modo oscuro.

Abrir

Componente de navegación de pie de página

Un componente de navegación a pie de página diseñado en un estilo retro/vintage inspirado en la estética de los años 80 y 90. Cuenta con un soporte de tema oscuro y es totalmente responsivo.

Abrir

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo con un estilo de diseño retro / vintage, que utiliza colores vibrantes y se adapta a las interfaces de las redes sociales.

Abrir