Componenti Piè di pagina Componente piè di pagina

Componente piè di pagina

Un componente Piè di pagina progettato in uno stile scheumorfico con una combinazione di colori triadica e complessità moderata, adatto per un layout Blog/Contenuto.

Anteprima

Codice HTML

<footer class="bg-gray-800 text-gray-100 p-6 dark:bg-gray-900">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">About Us</h2>
            <p class="text-sm">We are passionate about sharing knowledge through engaging content. Explore our blog to learn more.</p>
        </div>
        <div class="flex mb-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Random Image" class="rounded-full mr-2">
            <div class="flex flex-col">
                <span class="font-semibold">Author Name</span>
                <span class="text-xs text-gray-400">Author Bio Preview</span>
            </div>
        </div>
        <div class="flex flex-col mb-4">
            <h2 class="text-lg font-semibold mb-2">Follow Us</h2>
            <div class="flex space-x-4">
                <a href="#" class="p-2 rounded-full bg-blue-500 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
                    <img src="https://picsum.photos/20/20?random=2" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-pink-500 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
                    <img src="https://picsum.photos/20/20?random=3" alt="Social Icon" class="w-full h-full">
                </a>
                <a href="#" class="p-2 rounded-full bg-green-500 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
                    <img src="https://picsum.photos/20/20?random=4" alt="Social Icon" class="w-full h-full">
                </a>
            </div>
        </div>
    </div>
    <div class="text-center mt-6 border-t border-gray-700 pt-4">
        <p class="text-xs">&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
</footer>

Componenti correlati

Piè di pagina Componente Piè di pagina

Un semplice componente del piè di pagina con un sottile design di scheumorfismo, che utilizza una combinazione di colori analoga. Include un avviso di copyright, alcuni link di navigazione e icone dei social media. Il design è reattivo e supporta la modalità oscura.

Aperto

Componente piè di pagina

Componente piè di pagina reattivo con stile Skeuomorphism, combinazione di colori dei toni della Terra e supporto per temi scuri, progettato per i social media.

Aperto

Piè di pagina del blog semplice analogo 3D

Componente piè di pagina reattivo con supporto per temi scuri utilizzando Tailwind CSS. Il piè di pagina ha un semplice design 3D con colori analoghi. È ottimizzato per blog/siti Web di contenuti.

Aperto