Fußzeile

Fußzeile Komponente Fußzeile

Eine einfache Fußzeilenkomponente mit einem subtilen Skeuomorphismus-Design, das ein analoges Farbschema verwendet. Es enthält einen Copyright-Hinweis, einige Navigationslinks und Social-Media-Symbole. Das Design ist reaktionsschnell und unterstützt den Dunkelmodus.

Vorschau öffnen

                <footer class="bg-gradient-to-br from-stone-200 to-stone-400 text-stone-800 p-6 shadow-2xl dark:from-stone-800 dark:to-stone-900 dark:text-stone-200">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0 text-sm">
      <p>&copy; 2023 BlogSphere. All rights reserved.</p>
    </div>
    <nav class="mb-4 md:mb-0">
      <ul class="flex space-x-6 text-sm">
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Terms of Service</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Contact Us</a></li>
      </ul>
    </nav>
    <div class="flex space-x-4">
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.505 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.317 2.031c2.14 0 2.457.009 3.313.048 1.547.067 2.46.368 3.018.599 1.258.513 2.072 1.002 2.65 1.597.595.578 1.085 1.392 1.597 2.65.23.558.532 1.47.599 3.017.039.856.048 1.173.048 3.312 0 2.14-.009 2.457-.048 3.313-.067 1.547-.368 2.46-.599 3.018-.513 1.258-1.002 2.072-1.597 2.65-.578.595-1.392 1.085-2.65 1.597-.558.23-1.47.532-3.017.599-.856.039-1.173.048-3.312.048-2.14 0-2.457-.009-3.313-.048-1.547-.067-2.46-.368-3.018-.599-1.258-.513-2.072-1.002-2.65-1.597-.595-.578-1.085-1.392-1.597-2.65-.23-.558-.532-1.47-.599-3.017-.039-.856-.048-1.173-.048-3.312 0-2.14.009-2.457.048-3.313.067-1.547.368-2.46.599-3.018.513-1.258 1.002-2.072 1.597-2.65.578-.595 1.392-1.085 2.65-1.597.558-.23 1.47-.532 3.017-.599.856-.039 1.173-.048 3.312-.048ZM12 4.195c-2.466 0-2.736.01-3.692.051-1.433.062-2.3.344-2.805.547-.88.375-1.517.653-2.062 1.252-.527.575-.805 1.212-1.18 2.062-.203.504-.485 1.372-.547 2.805-.041.956-.051 1.226-.051 3.692 0 2.466.01 2.736.051 3.692.062 1.433.344 2.3.547 2.805.375.88.653 1.517 1.252 2.062.575.527 1.212.805 2.062 1.18.504.203 1.372.485 2.805.547.956.041 1.226.051 3.692.051 2.466 0 2.736-.01 3.692-.051 1.433-.062 2.3-.344 2.805-.547.88-.375 1.517-.653 2.062-1.252.527-.575.805-1.212 1.18-2.062.203-.504.485-1.372.547-2.805.041-.956.051-1.226.051-3.692 0-2.466-.01-2.736-.051-3.692-.062-1.433-.344-2.3-.547-2.805-.375-.88-.653-1.517-1.252-2.062-.575-.527-1.212-.805-2.062-1.18-.504-.203-1.372-.485-2.805-.547-.956-.041-1.226-.051-3.692-.051ZM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0 8.195c-1.761 0-3.195-1.434-3.195-3.195S10.239 8.805 12 8.805s3.195 1.434 3.195 3.195-1.434 3.195-3.195 3.195Zm6.398-9.014c-.655 0-1.186.531-1.186 1.186S17.743 7.367 18.398 7.367s1.186-.531 1.186-1.186-.531-1.186-1.186-1.186Z" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.296 2.762 7.933 6.603 9.243.484.088.662-.209.662-.463 0-.228-.009-.834-.014-1.636-2.688.586-3.254-1.297-3.254-1.297-.44-.817-1.07-1.033-1.07-1.033-.876-.597.066-.584.066-.584.969.068 1.479.995 1.479.995.86 1.474 2.25.991 2.793.758.086-.593.336-.991.613-1.22-2.144-.243-4.394-1.074-4.394-4.784 0-1.056.377-1.922 1-2.6-.1-.243-.435-1.291.096-2.564 0 0 .82-1.393 2.7-.54.78.199 1.608.298 2.435.301.827-.003 1.655-.102 2.435-.301 1.878-.853 2.7-.54 2.7-.54.531 1.273.196 2.32.096 2.564.623.678 1 1.544 1 2.6 0 3.719-2.253 4.535-4.398 4.778.347.298.654.887.654 1.787 0 1.291-.012 2.33-.012 2.645 0 .256.177.555.667.46C19.238 19.927 22 16.29 22 12c0-5.523-4.477-10-10-10z" />
        </svg>
      </a>
    </div>
  </div>
</footer>

Retro Blog Fußzeile

Eine Retro-/Vintage-Fußzeilenkomponente für einen Blog mit monochromatischem Farbschema, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                <footer class="bg-gray-200 text-gray-700 dark:bg-gray-900 dark:text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
      <div class="text-center md:text-left">
        <p class="text-sm">&copy; 2023 The Retro Blog. All rights reserved.</p>
      </div>
      <nav class="flex space-x-4">
        <a href="#" class="text-sm hover:underline">Privacy Policy</a>
        <a href="#" class="text-sm hover:underline">Terms of Service</a>
        <a href="#" class="text-sm hover:underline">Contact Us</a>
      </nav>
    </div>
  </div>
</footer>

Footer-Komponente

Eine reaktionsschnelle Retro-/Vintage-Footer-Komponente für einen Blog mit triadischem Farbschema und Unterstützung für dunkle Themen.

Vorschau öffnen

                <footer class="bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-purple-700 dark:text-purple-400">About Us</h3>
      <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-400">Categories</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:underline">Technology</a></li>
        <li><a href="#" class="hover:underline">Travel</a></li>
        <li><a href="#" class="hover:underline">Food</a></li>
        <li><a href="#" class="hover:underline">Lifestyle</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-xl font-bold mb-4 text-orange-700 dark:text-orange-400">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-400"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-400"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-orange-700 dark:hover:text-orange-400"><i class="fab fa-instagram fa-2x"></i></a>
      </div>
    </div>
  </div>
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

Footer-Komponente

Eine neumorphe Fußzeilenkomponente für einen Blog/eine Content-Website, monochromatisches Farbschema, mit Unterstützung für den Dunkelmodus. Es handelt sich um ein mäßig komplexes Bauteil. Es ist reaktionsschnell.

Vorschau öffnen

                <footer class="dark:bg-gray-800 bg-gray-200 text-gray-700 dark:text-gray-300 py-10 px-4 md:px-8 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">About Us</h3>
      <p class="text-sm leading-relaxed">We are a passionate team dedicated to delivering high-quality content and insights on various topics. Stay tuned for more!</p>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Quick Links</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a></li>
      </ul>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Subscribe</h3>
      <p class="text-sm mb-4">Get the latest articles and updates directly in your inbox.</p>
      <div class="flex">
        <input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <button class="bg-gray-400 dark:bg-gray-600 text-white px-4 py-2 rounded-r-md hover:bg-gray-500 dark:hover:bg-gray-700 transition-colors duration-200 shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark">Subscribe</button>
      </div>
    </div>
  </div>
  
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #222222;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #222222;
  }
  .shadow-neumorphic-btn-light {
    box-shadow: 3px 3px 6px #b0b0b0, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #222222;
  }
</style>

Neumorphism Footer-Komponente

Resposive Neumorphism Footer-Komponente mit Unterstützung für dunkle Themen

Vorschau öffnen

                <footer class="bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap md:text-left text-center order-first">
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4 lg:mt-0 mt-10">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">SUBSCRIBE</h2>
        <div class="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
          <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
            <label for="footer-field" class="leading-7 text-sm text-gray-700 dark:text-gray-300">Placeholder</label>
            <input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-100 dark:bg-gray-700 bg-opacity-50 rounded border border-gray-300 dark:border-gray-700 focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500 text-base outline-none text-gray-700 dark:text-gray-300 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
          </div>
          <button class="lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mt-2 md:text-left text-center">Bitian theme
          <br class="lg:block hidden">whatever future is there for them</p>
      </div>
    </div>
  </div>
  <div class="bg-gray-300 dark:bg-gray-900">
    <div class="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
      <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900 dark:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
          <path d="M12 2L2 12l10 10 10-10L12 2zM12 12l8-8-8-8Z"></path>
     </svg>
        <span class="ml-3 text-xl">Tailblocks</span>
      </a>
      <p class="text-sm text-gray-700 dark:text-gray-300 sm:ml-6 sm:mt-0 mt-4">© 2024 Tailwind —
        <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-700 dark:text-gray-300 ml-1" target="_blank">@knyttneve</a>
      </p>
      <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
        <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-.8 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
            <circle cx="4" cy="4" r="2" stroke="none"></circle>
          </svg>
        </a>
      </span>
    </div>
  </div>
</footer>

Skeuomorphe Fußzeilenkomponente

Responsive Footer-Komponente mit skeuomorphem Design, analogem Farbschema (Grün, Blau-Grün) und moderater Komplexität, geeignet für Unternehmenswebsites. Enthält Links, einen Logo-Platzhalter und einen subtilen Skeuomorphie-Effekt, der mit Schatten und Farbverläufen erzielt wird. Unterstützt den Hell- und Dunkelmodus.

Vorschau öffnen

                <footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
  <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-6 md:mb-0">
        <!-- Logo Placeholder with Skeuomorphic effect -->
        <div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
          <svg class="w-12 h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Resources</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
        <p class="mb-2">123 Business Lane, Corporate City</p>
        <p class="mb-2">Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
    </div>
    <hr class="my-8 border-gray-400 dark:border-gray-600">
    <div class="text-center text-sm">
      &copy; 2023 Your Business. All rights reserved.
    </div>
  </div>
</footer>

Neumorphe Fußzeilenkomponente

Eine Fußzeilenkomponente im Neumorphic-Stil für Social-Media-Schnittstellen mit lebendigen Farben und einem komplexen Layout, die den Dunkelmodus unterstützt.

Vorschau öffnen

                <footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
    <div class="flex flex-col items-center">
        <div class="flex space-x-6 mb-4">
            <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
            </a>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
        <p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
    </div>
</footer>

Footer-Komponente

Eine einfache, reaktionsschnelle Fußzeilenkomponente im Retro-/Vintage-Stil mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es verfügt über ein grundlegendes Layout, das für Geschäfts-/Unternehmenswebsites geeignet ist.

Vorschau öffnen

                <footer class="bg-blue-900 text-white py-6 mt-10 dark:bg-gray-800">
    <div class="container mx-auto text-center">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/100/50" alt="Company Logo" class="mx-auto mb-2">
                <h2 class="text-lg font-bold">Company Name</h2>
                <p class="text-sm">Your tagline goes here.</p>
            </div>
            <div>
                <h3 class="text-md font-semibold mb-2">Follow Us</h3>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instagram" class="h-6 w-6"></a>
                </div>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-600 pt-4">
            <p class="text-xs">&copy; 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

Social-Media-Fußzeilenkomponente

Eine responsive Fußzeilenkomponente für Schnittstellen in sozialen Netzwerken, die nach den Prinzipien des Material Designs unter Verwendung eines monochromatischen blauen Farbschemas entwickelt wurde. Es bietet rasterbasierte Layouts, Tiefeneffekte (Schatten), Hover- und Übergangsanimationen für interaktive Elemente, ein Newsletter-Anmeldeformular, soziale Symbole, Benutzer-Avatare und Unterstützung des Dunkelmodus über den Dark:-Modifikator von Tailwind.

Vorschau öffnen

                <footer class="bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 shadow-inner pt-16 pb-8 transition-colors duration-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      <!-- Brand & Description -->
      <div>
        <img class="h-8 mb-4 rounded shadow-md" src="https://picsum.photos/100/40?grayscale" alt="SocialNet Logo" />
        <h2 class="text-lg font-semibold mb-2">About SocialNet</h2>
        <p class="text-sm leading-relaxed">Connect with friends, share your moments, and explore what's happening around you.</p>
      </div>
      <!-- Useful Links -->
      <div class="grid grid-cols-2 gap-8">
        <div>
          <h3 class="text-sm font-semibold mb-3">Product</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Features</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Integrations</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold mb-3">Company</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">About Us</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Careers</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Contact</a></li>
          </ul>
        </div>
      </div>
      <!-- Subscription & Social Icons -->
      <div>
        <h3 class="text-sm font-semibold mb-4">Stay Connected</h3>
        <form class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-2">
          <input type="email" placeholder="Your email" class="flex-grow px-3 py-2 bg-blue-100 dark:bg-blue-800 border border-blue-200 dark:border-blue-700 text-sm placeholder-blue-400 dark:placeholder-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition-colors duration-200" />
          <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow hover:shadow-lg transition-all duration-200">Subscribe</button>
        </form>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Facebook Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.407.593 24 1.324 24H12V14.709h-3.292v-3.63H12V8.271c0-3.265 1.993-5.043 4.897-5.043 1.392 0 2.586.104 2.934.15v3.403l-2.015.001c-1.58 0-1.885.752-1.885 1.85v2.426h3.77l-.492 3.63h-3.278V24h6.422c.73 0 1.324-.593 1.324-1.324V1.324C24 .593 23.407 0 22.676 0z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Twitter Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557a9.93 9.93 0 0 1-2.827.775 4.93 4.93 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.384 4.482A13.94 13.94 0 0 1 1.671 3.149 4.916 4.916 0 0 0 3.194 9.723 4.9 4.9 0 0 1 .964 9.1v.062a4.917 4.917 0 0 0 3.941 4.817 4.913 4.913 0 0 1-2.212.084 4.919 4.919 0 0 0 4.594 3.417A9.868 9.868 0 0 1 .48 19.292 13.94 13.94 0 0 0 7.548 21c9.356 0 14.407-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Instagram Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.052.248 2.528.415a5.003 5.003 0 0 1 1.845 1.17 5.006 5.006 0 0 1 1.17 1.845c.167.476.359 1.322.415 2.528.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.248 2.052-.415 2.528a5.002 5.002 0 0 1-1.17 1.845 5.004 5.004 0 0 1-1.845 1.17c-.476.167-1.322.359-2.528.415-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.052-.248-2.528-.415a4.993 4.993 0 0 1-1.845-1.17 4.994 4.994 0 0 1-1.17-1.845c-.167-.476-.359-1.322-.415-2.528C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.056-1.206.248-2.052.415-2.528a5.005 5.005 0 0 1 1.17-1.845 5.005 5.005 0 0 1 1.845-1.17c.476-.167 1.322-.359 2.528-.415C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.775.131 4.836.343 4.1.626a7.005 7.005 0 0 0-2.541 1.636A7.005 7.005 0 0 0 .626 4.1C.343 4.836.131 5.775.072 7.052.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.277.271 2.216.554 2.952a7.002 7.002 0 0 0 1.636 2.541 7.003 7.003 0 0 0 2.541 1.636c.736.283 1.675.495 2.952.554C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.277-.059 2.216-.271 2.952-.554a7.006 7.006 0 0 0 2.541-1.636 7.004 7.004 0 0 0 1.636-2.541c.283-.736.495-1.675.554-2.952.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.277-.271-2.216-.554-2.952a7.003 7.003 0 0 0-1.636-2.541A7.005 7.005 0 0 0 19.9.626c-.736-.283-1.675-.495-2.952-.554C15.668.013 15.259 0 12 0z"/><path d="M12 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-10.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-12 flex flex-col md:flex-row items-center justify-between border-t border-blue-200 dark:border-blue-700 pt-6">
      <p class="text-xs">&copy; 2023 SocialNet. All rights reserved.</p>
      <div class="flex -space-x-2 mt-4 md:mt-0">
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/35.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User avatar" />
      </div>
    </div>
  </div>
</footer>

Neumorphe lebendige Fußzeile

Eine einfache, reaktionsschnelle Fußzeilenkomponente, die mit neumorphen Designprinzipien und lebendigen Farben gestaltet ist. Es zeichnet sich durch ein weiches, extrudiertes Aussehen mit subtilen Schatten aus, während die Akzentfarben mit hoher Sättigung beibehalten werden. Die Fußzeile enthält grundlegende Abschnitte für die Website-Navigation, soziale Links und Copyright-Informationen mit vollständiger Unterstützung des Dunkelmodus.

Vorschau öffnen

                <!-- Neumorphic Vibrant Footer -->
<footer class="w-full py-8 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Main Footer Content -->
    <div class="rounded-2xl bg-gray-200 dark:bg-gray-700 p-8 shadow-[8px_8px_16px_#d1d1d1,_-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#1a1a1a,_-8px_-8px_16px_#333333]">
      
      <!-- Logo & Tagline -->
      <div class="flex flex-col md:flex-row justify-between items-center mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400">Blog Title</h2>
          <p class="text-gray-600 dark:text-gray-300 mt-1">Insights & Stories</p>
        </div>
        
        <!-- Newsletter Signup -->
        <div class="flex items-center space-x-2">
          <input 
            type="email" 
            placeholder="Your email" 
            class="px-4 py-2 rounded-xl bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 shadow-inner"
          >
          <button class="px-4 py-2 rounded-xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white font-medium shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:opacity-90 transition-opacity">
            Subscribe
          </button>
        </div>
      </div>
      
      <!-- Navigation Links -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
        <div>
          <h3 class="font-semibold text-lg mb-3 text-cyan-600 dark:text-cyan-400">Content</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Articles</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Tutorials</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Stories</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-emerald-600 dark:text-emerald-400">Company</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">About</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Team</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Careers</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-amber-600 dark:text-amber-400">Support</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Help Center</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Contact</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-blue-600 dark:text-blue-400">Connect</h3>
          <div class="flex space-x-4">
            <!-- Social Icons -->
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-fuchsia-500 dark:text-fuchsia-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-fuchsia-500 hover:text-white dark:hover:bg-fuchsia-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-cyan-500 dark:text-cyan-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-cyan-500 hover:text-white dark:hover:bg-cyan-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-pink-500 dark:text-pink-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-pink-500 hover:text-white dark:hover:bg-pink-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
      
      <!-- Footer Bottom -->
      <div class="pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          © 2023 Blog Title. All rights reserved.
        </p>
        <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Terms</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Cookies</a>
        </div>
      </div>
      
    </div>
  </div>
</footer>

Kategorien