Fußzeilen-Navigation

Komponente "Fußzeilennavigation"

Footer Navigation Component for E-Commerce with Material Design - eine einfache Komponente mit Unterstützung für Responsive und Dark Mode mit einem komplementären Farbschema.

Vorschau öffnen

                <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 Fußzeilennavigation

Fußzeilennavigationskomponente mit Glassmorphism-Stil, lebendigem Farbschema und komplexem Layout für Dashboard-Zwecke. Responsives Design mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau öffnen

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

Komponente "Fußzeilennavigation"

Eine einfache Fußzeilennavigationskomponente, die nach Material Design-Prinzipien und einem analogen Farbschema für Geschäfts-/Unternehmenswebsites gestaltet ist. Es unterstützt den Dunkelmodus und ist reaktionsschnell.

Vorschau öffnen

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

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle Fußzeilennavigationskomponente, die für Geschäfts-/Unternehmenswebsites im Dunkelmodus entwickelt wurde, mit einem triadischen Farbschema und mittlerer Komplexität mit interaktiven Funktionen.

Vorschau öffnen

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

Retro/Vintage E-Commerce Fußzeile

Retro / Vintage Footer Navigation Component mit Erdtönen, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen für den E-Commerce.

Vorschau öffnen

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

Komponente "Fußzeilennavigation"

Fußzeilennavigationskomponente mit Dunkelmodus und responsiven Effekten

Vorschau öffnen

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

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle Fußzeilennavigationskomponente mit einem Glasmorphismus-Stil mit mattglasähnlichen, durchscheinenden Elementen und Unschärfeeffekten. Es unterstützt den Dunkelmodus und enthält Platzhalterbilder.

Vorschau öffnen

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

Komponente "Fußzeilennavigation"

Eine Navigationskomponente für die Fußzeile, die im Retro-/Vintage-Stil gestaltet ist und von der Ästhetik der 80er und 90er Jahre inspiriert ist. Es verfügt über eine Unterstützung für dunkle Themen und ist vollständig reaktionsschnell.

Vorschau öffnen

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

3D-Design-Fußzeilennavigationskomponente

Eine Fußzeilennavigationskomponente im 3D-Stil mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau öffnen

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

Fußzeilennavigation, Komponente 38

Eine reaktionsschnelle Fußzeilennavigationskomponente, die mit einem skeuomorphen Stil entwickelt wurde, um reale Elemente nachzuahmen, mit Unterstützung für dunkle Themen und unter Verwendung von Tailwind CSS. Diese Komponente enthält Links, Platzhalterbilder und Avatare.

Vorschau öffnen

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

Kategorien