Pie de página

Pie de página Componente Pie de página

Un componente de pie de página simple con un sutil diseño de Skeuomorphism, que utiliza un esquema de color análogo. Incluye un aviso de derechos de autor, algunos enlaces de navegación e iconos de redes sociales. El diseño es responsivo y admite el modo oscuro.

Abrir vista previa

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

Pie de página de blog retro

Un componente de pie de página retro/vintage para un blog con una combinación de colores monocromática, un diseño sencillo, un diseño responsivo y compatibilidad con temas oscuros.

Abrir vista previa

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

Componente de pie de página

Un componente de pie de página retro/vintage responsivo para un blog con combinación de colores triádica y compatibilidad con temas oscuros.

Abrir vista previa

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

Componente de pie de página

Un componente de pie de página neumórfico para un sitio web de blog/contenido, esquema de color monocromático, con soporte para modo oscuro. Es un componente moderadamente complejo. Es responsivo.

Abrir vista previa

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

Componente de pie de página de neumorfismo

Componente de pie de página de neumorfismo responsivo con soporte de tema oscuro

Abrir vista previa

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

Componente de pie de página skeuomórfico

Componente de pie de página responsivo con diseño esqueuomórfico, esquema de color análogo (verdes, azul-verdes) y complejidad moderada adecuado para sitios web comerciales. Incluye enlaces, un marcador de posición de logotipo y un sutil efecto Skeuomorphic logrado con sombras y degradados. Soporta modos claro y oscuro.

Abrir vista previa

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

Componente de pie de página neumórfico

Un componente de pie de página de estilo neumórfico para interfaces de redes sociales con colores vibrantes y un diseño complejo, compatible con el modo oscuro.

Abrir vista previa

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

Componente de pie de página

Un componente de pie de página responsivo simple diseñado en un estilo retro / vintage con soporte para temas oscuros, usando Tailwind CSS. Cuenta con un diseño básico adecuado para sitios web comerciales / corporativos.

Abrir vista previa

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

Componente de pie de página de redes sociales

Un componente de pie de página responsivo para interfaces de redes sociales, diseñado con los principios de Material Design utilizando un esquema de color azul monocromático. Cuenta con diseños basados en cuadrículas, efectos de profundidad (sombras), animaciones de desplazamiento y transición para elementos interactivos, un formulario de suscripción al boletín, íconos sociales, avatares de usuario y soporte para el modo oscuro a través del modificador dark: de Tailwind.

Abrir vista previa

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

Pie de página vibrante neumórfico

Un componente de pie de página simple y receptivo diseñado con principios de diseño neumórfico y colores vibrantes. Presenta una apariencia suave y extruida con sombras sutiles mientras mantiene los colores de acento de alta saturación. El pie de página incluye secciones básicas para la navegación del sitio, enlaces sociales e información de derechos de autor con soporte completo para el modo oscuro.

Abrir vista previa

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

Categorías