Navigation dans le pied de page

Composant de navigation en pied de page

Composant de navigation de pied de page pour le commerce électronique avec Material Design - un composant simple avec prise en charge du mode réactif et sombre, avec une palette de couleurs complémentaire.

Ouvrir l’aperçu

                <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

Composant de navigation en pied de page avec style Glassmorphism, palette de couleurs vives et mise en page complexe à des fins de tableau de bord. Conception réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

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

Composant de navigation en pied de page

Il s’agit d’un composant de navigation de pied de page simple conçu selon les principes de conception matérielle et une palette de couleurs analogue pour les sites Web d’entreprise. Il prend en charge le mode sombre et est réactif.

Ouvrir l’aperçu

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

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif conçu pour les sites Web d’entreprise/d’entreprise en mode sombre, doté d’une palette de couleurs triadique et d’une complexité moyenne avec des fonctionnalités interactives.

Ouvrir l’aperçu

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

Rétro/Vintage E-commerce Footer

Composant de navigation de pied de page rétro / vintage avec des tons de terre, une mise en page simple, un design réactif et la prise en charge du thème sombre, pour le commerce électronique.

Ouvrir l’aperçu

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

Composant de navigation en pied de page

Composant de navigation en pied de page avec mode sombre et effets réactifs

Ouvrir l’aperçu

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

Composant de navigation en pied de page

Un composant de navigation de pied de page réactif avec un style glassmorphism avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il prend en charge le mode sombre et inclut des images de repère d’emplacement.

Ouvrir l’aperçu

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

Composant de navigation en pied de page

Un composant de navigation en pied de page conçu dans un style rétro/vintage inspiré de l’esthétique des années 80 et 90. Il dispose d’un support de thème sombre et est entièrement réactif.

Ouvrir l’aperçu

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

Composant de navigation de pied de page de conception 3D

Un composant de navigation de pied de page de style 3D avec un design réactif et une prise en charge du mode sombre.

Ouvrir l’aperçu

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

Composant de navigation en pied de page 38

Un composant de navigation de pied de page réactif conçu avec un style skeuomorphique pour imiter les éléments du monde réel, avec la prise en charge du thème sombre et l’utilisation de Tailwind CSS. Ce composant comprend des liens, des images d’espace réservé et des avatars.

Ouvrir l’aperçu

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

Catégories