Componenti Piè di pagina Piè di pagina di Glassmorphism

Piè di pagina di Glassmorphism

Un componente del piè di pagina reattivo progettato con lo stile glassmorphism, con effetti simili al vetro smerigliato e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-semibold">Your Company</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
            </div>
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
                <p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
            </div>
        </div>
        <div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
                </ul>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

Componenti correlati

Componente piè di pagina

Componente piè di pagina semplice, pulito e affidabile, adatto a sistemi di prenotazione e prenotazione aziendali/professionali, caratterizzato da un sottile bordo sfumato arcobaleno e piena reattività con supporto per la modalità scura.

Aperto

Componente piè di pagina

Un componente piè di pagina neumorfico per un blog/sito Web di contenuti, combinazione di colori monocromatica, con supporto per la modalità scura. Si tratta di un componente moderatamente complesso. È reattivo.

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