Composant de pied de page de neumorphisme
Composant de pied de page de neumorphisme réactif avec prise en charge du thème sombre
HTML Code
<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>Composants associés
Composant de pied de page
Un composant de pied de page simple et réactif avec des éléments de conception 3D et des tons de terre, conçu pour un blog ou un site de contenu avec prise en charge du thème sombre.
Glassmorphism Footer
Un composant de pied de page réactif conçu avec le style glassmorphism, avec des effets de verre givré et la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Pied de page vibrant neumorphe
Un composant de pied de page simple et réactif conçu avec des principes de conception neumorphiques et des couleurs vives. Il présente un aspect doux et extrudé avec des ombres subtiles tout en conservant des couleurs d’accent à haute saturation. Le pied de page comprend des sections de base pour la navigation sur le site, les liens sociaux et les informations sur les droits d’auteur avec une prise en charge complète du mode sombre.