Componente de pie de página de neumorfismo
Componente de pie de página de neumorfismo responsivo con soporte de tema oscuro
Código HTML
<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>Componentes relacionados
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.
Memphis_Purple_Entertainment_Footer_Component
Un componente de pie de página simple para plataformas de entretenimiento/medios, con un estilo de diseño Memphis con colores púrpura-violeta audaces, elementos geométricos y capacidad de respuesta total con soporte para modo oscuro.
Componente de pie de página de Glassmorphism
Un componente de pie de página interactivo con un estilo de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, y admite un tema oscuro.