Komponenten suchen

Kategorien

Komponenten Fußzeilen-Navigation

Fußzeilen-Navigation

Navigationslinks am unteren Rand der Seite

Komponente "Fußzeilennavigation"

Eine einfache Fußzeilennavigationskomponente, die im brutalistischen Stil mit einem triadischen Farbschema für Social-Media-Schnittstellen gestaltet ist. Es enthält Links und Avatar-Bilder mit Unterstützung für den Dunkelmodus.

Offen Vorschau

                <footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
                <li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
                <li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex space-x-4 mt-4 md:mt-0">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
            <a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
            <a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
        </div>
    </div>
</footer>

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle Fußzeilennavigationskomponente für Dashboards mit Unterstützung für dunkle Themen, die Mikrointeraktionen beim Schweben von Links mit triadischen Farben und komplexen Elementen bietet. Kein JavaScript, nur HTML mit Tailwind CSS.

Offen Vorschau

                <footer class="bg-blue-100 dark:bg-blue-900">
  <div class="container mx-auto px-6 py-8">
    <div class="flex flex-col items-center text-center">
      <div class="flex flex-wrap justify-center -mx-4">
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
        <a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
        <a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
      </div>
      <p class="mt-4 text-sm text-blue-800 dark:text-blue-200">&copy; 2023 Dashboard Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

Komponente "Fußzeilennavigation"

Eine einfache Fußzeilennavigationskomponente, die im Glassmorphism-Stil mit einem monochromatischen Farbschema gestaltet ist. Es ist reaktionsschnell, unterstützt den Dunkelmodus und eignet sich für E-Commerce-Websites.

Offen Vorschau

                <footer class="bg-white bg-opacity-40 backdrop-blur-lg p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-50">
    <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
        <div class="text-center sm:text-left">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Shop with Us</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Your online shopping experience starts here.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Products</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">About Us</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your E-commerce. All rights reserved.</p>
    </div>
</footer>

Komponente "Fußzeilennavigation"

Eine reaktionsschnelle und komplexe Fußzeilennavigationskomponente im Neumorphism-Stil für Unternehmenswebsites, die ein Graustufen-Farbschema mit Unterstützung für den Dunkelmodus verwenden. Kein JavaScript.

Offen Vorschau

                <footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
      <p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
      <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
    </div>
  </div>
  <div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Your Company. All rights reserved.</p>
  </div>
</footer>

<style>
.neumorphism-light {
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

.neumorphism-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>

Komponente "Fußzeilennavigation"

Fußzeilennavigationskomponente mit Neumorphismus-Design, monochromatischem Farbschema, komplexer Komplexität und Social-Media-Zweck. Responsives Design mit Unterstützung für dunkle Themen.

Offen Vorschau

                <footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
      </ul>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-gray-600 dark:text-gray-300">
    &copy; 2023 Your Company. All rights reserved.
  </div>

  <style>
    .neumorphic-card {
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .neumorphic-card {
        background: #333333;
        box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
    }
  </style>
</footer>

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.

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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

Offen Vorschau

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