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.

Abrir vista previa

                <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>

Glassmorphism Footer Navigation

Componente de navegación de pie de página con estilo Glassmorphism, combinación de colores vibrantes y diseño complejo para fines de tablero. Diseño responsivo con soporte para modo oscuro usando Tailwind CSS.

Abrir vista previa

                <footer class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-pink-500 text-white dark:bg-blue-500 dark:bg-opacity-20 dark:text-gray-200 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="col-span-2 md:col-span-1">
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">About Us</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Careers</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Partnerships</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Products</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Features</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Pricing</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Integrations</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">API</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Blog</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Documentation</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Support</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Community</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-indigo-200 dark:text-indigo-400 mb-4">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Terms of Service</a></li>
          <li><a href="#" class="text-white hover:text-indigo-200 dark:text-gray-200 dark:hover:text-indigo-400 transition duration-200">Cookie Policy</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-indigo-300 dark:border-indigo-700 pt-6 text-center text-sm">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página simple diseñado con los principios de Material Design y un esquema de color análogo para sitios web comerciales/corporativos. Es compatible con el modo oscuro y responde.

Abrir vista previa

                <footer class="bg-gray-100 dark:bg-gray-800 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/200/50" alt="Company Logo" class="h-10" />
            </div>
            <div class="flex flex-col md:flex-row space-x-4">
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">About Us</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Services</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Contact</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Privacy Policy</a>
            </div>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400 text-sm">© 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo diseñado para sitios web comerciales/corporativos en modo oscuro, con un esquema de color triádico y complejidad media con funciones interactivas.

Abrir vista previa

                <footer class="bg-gray-800 text-gray-200 py-6">
    <div class="container mx-auto flex justify-between items-center flex-wrap">
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Company Info</h4>
            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Quick Links</h4>
            <ul>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Contact Us</h4>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <div class="text-sm">
                    <p>John Doe</p>
                    <p>[email protected]</p>
                </div>
            </div>
            <p class="text-sm">Reach out to us for any inquiries.</p>
        </div>
    </div>
    <div class="bg-gray-700 text-center py-4 mt-4">
        <p class="text-sm">&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

Pie de página de comercio electrónico retro/vintage

Componente de navegación de pie de página retro / vintage con tonos tierra, diseño simple, diseño receptivo y soporte de tema oscuro, para comercio electrónico.

Abrir vista previa

                <footer class="bg-stone-100 text-amber-900 dark:bg-stone-900 dark:text-amber-100 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-bold mb-2">E-commerce Store</h3>
        <p class="text-sm">© 2023 All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Quick Links</h4>
        <ul class="text-sm">
          <li class="mb-1"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">Shop</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Follow Us</h4>
        <div class="flex space-x-4">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-twitter"></i></a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-instagram"></i></a>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Contact Us</h4>
        <p class="text-sm">123 Retro Lane</p>
        <p class="text-sm">Vintage City, VC 45678</p>
        <p class="text-sm">[email protected]</p>
        <p class="text-sm">+(123) 456-7890</p>
      </div>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Componente de navegación de pie de página con modo oscuro y efectos responsivos

Abrir vista previa

                <footer class="bg-gray-900 text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Company</h3>
        <ul>
          <li><a href="#" class="hover:text-white">About Us</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Press</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Products</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Features</a></li>
          <li><a href="#" class="hover:text-white">Pricing</a></li>
          <li><a href="#" class="hover:text-white">Integrations</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Support</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Help Center</a></li>
          <li><a href="#" class="hover:text-white">API Status</a></li>
          <li><a href="#" class="hover:text-white">Contact Us</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
      <div class="flex space-x-4 mt-4 md:mt-0">
        <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

Componente de navegación de pie de página

Un componente de navegación de pie de página receptivo con un estilo de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es compatible con el modo oscuro e incluye imágenes de marcador de posición.

Abrir vista previa

                <footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
                <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
            </div>
            <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
            </nav>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

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 vista previa

                <footer class="bg-gray-800 text-white py-8 mt-10">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left">
            <h2 class="text-2xl font-bold mb-2">Stay Connected!</h2>
            <p>Follow us on our social media channels:</p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full">
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="rounded-full">
                </a>
            </div>
        </div>
        <nav class="mt-6 md:mt-0">
            <ul class="flex flex-col md:flex-row space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="text-center mt-6">
        <p class="text-gray-500 text-sm">&copy; 2023 Your Company. All rights reserved.</p>
    </div>
</footer>

Componente de navegación de pie de página de diseño 3D

Un componente de navegación de pie de página de estilo 3D con diseño responsivo y compatibilidad con el modo oscuro.

Abrir vista previa

                <footer class="bg-gray-100 dark:bg-gray-900 relative">
  <div class="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Marketing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Analytics</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Commerce</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Insights</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Pricing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Documentation</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Guides</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">API Status</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">About</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Blog</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Jobs</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Press</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Partners</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Claim</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Privacy</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-300 dark:border-gray-700 pt-8 md:flex md:items-center md:justify-between">
      <p class="text-base text-gray-500 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
    </div>
  </div>
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
    <div class="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-64 h-64 rounded-full bg-blue-500 dark:bg-blue-700 opacity-20 blur-3xl"></div>
    <div class="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-purple-500 dark:bg-purple-700 opacity-20 blur-3xl"></div>
  </div>
</footer>

Componente de navegación de pie de página 38

Un componente de navegación de pie de página responsivo diseñado con un estilo skeuomórfico para imitar elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS. Este componente incluye enlaces, imágenes de marcador de posición y avatares.

Abrir vista previa

                <footer class="bg-gray-800 text-white p-6 mt-8">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col items-center md:items-start">
            <h2 class="text-lg font-bold mb-2">Stay Connected</h2>
            <p class="text-sm">Follow us on our social channels!</p>
            <div class="flex space-x-4 mt-2">
                <a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
                <a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
                <a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
            </div>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">About Us</h2>
            <ul class="text-sm space-y-1">
                <li><a href="#" class="hover:underline">Our Story</a></li>
                <li><a href="#" class="hover:underline">Career</a></li>
                <li><a href="#" class="hover:underline">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
            <h2 class="text-lg font-bold mb-2">User Profiles</h2>
            <div class="flex space-x-2">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            </div>
        </div>
    </div>
    <div class="mt-6 text-center text-sm">
        <p>&copy; 2023 Your Company. All Rights Reserved.</p>
        <p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
    </div>
</footer>
<style>
    @media (prefers-color-scheme: dark) {
        footer {
            background-color: #1f1f1f;
        }
        footer a {
            color: #white;
        }
        footer a:hover {
            color: #cbd5e1;
        }
    }
</style>

Categorías