Componentes Pie de página Componente de pie de página

Componente de pie de página

Un componente de pie de página retro/vintage responsivo para un blog con combinación de colores triádica y compatibilidad con temas oscuros.

Vista previa

Código HTML

<footer class="bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-purple-700 dark:text-purple-400">About Us</h3>
      <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-400">Categories</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:underline">Technology</a></li>
        <li><a href="#" class="hover:underline">Travel</a></li>
        <li><a href="#" class="hover:underline">Food</a></li>
        <li><a href="#" class="hover:underline">Lifestyle</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-xl font-bold mb-4 text-orange-700 dark:text-orange-400">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-400"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-400"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-orange-700 dark:hover:text-orange-400"><i class="fab fa-instagram fa-2x"></i></a>
      </div>
    </div>
  </div>
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

Componentes relacionados

Componente de pie de página skeuomórfico

Componente de pie de página responsivo con diseño esqueuomórfico, esquema de color análogo (verdes, azul-verdes) y complejidad moderada adecuado para sitios web comerciales. Incluye enlaces, un marcador de posición de logotipo y un sutil efecto Skeuomorphic logrado con sombras y degradados. Soporta modos claro y oscuro.

Abrir

Componente de pie de página

Un componente de pie de página responsivo simple diseñado en un estilo retro / vintage con soporte para temas oscuros, usando Tailwind CSS. Cuenta con un diseño básico adecuado para sitios web comerciales / corporativos.

Abrir

Pie de página de Glassmorphism

Un componente de pie de página responsivo diseñado con estilo de cristal, con efectos similares al vidrio esmerilado y soporte para temas oscuros con Tailwind CSS.

Abrir