Composants Pied de page Composant de pied de page

Composant de pied de page

Un composant de pied de page simple et réactif conçu dans un style rétro/vintage avec un support de thème sombre, utilisant Tailwind CSS. Il dispose d’une mise en page de base adaptée aux sites Web d’entreprise.

Aperçu

HTML Code

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

Composants associés

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.

Ouvrir