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

Organic_Nature_Inspired_Real_Estate_Footer

Un componente de pie de página complejo, inspirado en la naturaleza y de colores complementarios para plataformas inmobiliarias, con líneas fluidas, formas naturales, múltiples elementos interactivos y capacidad de respuesta total con soporte para modo oscuro.

Abrir

Pie de página de blog simple análogo en 3D

Componente de pie de página responsivo con soporte de tema oscuro usando Tailwind CSS. El pie de página tiene un diseño 3D simple con colores análogos. Está optimizado para sitios web de blogs/contenidos.

Abrir

Acuarela/Pie de página de neón artístico

Un componente de pie de página simple y receptivo con una estética artística / acuarela y un esquema de color neón vibrante, adecuado para un sitio web de portafolio. Incluye soporte para modo oscuro.

Abrir