Composants Pied de page Composant de pied de page

Composant de pied de page

Un composant Footer conçu dans un style Neumorphism, prenant en charge les effets réactifs et les thèmes sombres à l’aide de Tailwind CSS.

Aperçu

HTML Code

<footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
                <p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
                </div>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
                <p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
            </div>
            <div class="hidden md:block">
                <img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
            </div>
        </div>
        <div class="text-center mt-6">
            <p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
        </div>
    </div>
</footer>

Composants associés

Composant de pied de page financier

Un composant de pied de page réactif pour les interfaces financières et bancaires, doté d’une palette de couleurs complémentaires, de principes de conception matérielle et d’une prise en charge complète du mode sombre. Comprend des liens de navigation, des icônes de médias sociaux et un avis de droit d’auteur.

Ouvrir

Memphis_Purple_Entertainment_Footer_Component

Un composant de pied de page simple pour les plates-formes de divertissement/médias, avec un style Memphis Design avec des couleurs violettes audacieuses, des éléments géométriques et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir

3D analogue simple pied de blog

Composant de pied de page réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS. Le pied de page a un design 3D simple avec des couleurs analogues. Il est optimisé pour les sites de blog/contenu.

Ouvrir