Categorie

Componenti Piè di pagina

Piè di pagina

Sezione inferiore del sito web con informazioni di contatto, copyright, ecc.

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.

Apri anteprima

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

Componente piè di pagina

Un componente piè di pagina in stile Brutalismo con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center">  <div class="flex flex-wrap justify-center">    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Contact Us</h4>      <p class="text-lg">Email: [email protected]</p>      <p class="text-lg">Phone: (123) 456-7890</p>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Follow Us</h4>      <div class="flex space-x-4">        <a href="#" class="text-lg hover:text-gray-400">Facebook</a>        <a href="#" class="text-lg hover:text-gray-400">Twitter</a>        <a href="#" class="text-lg hover:text-gray-400">Instagram</a>      </div>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">About Us</h4>      <p class="text-lg">We are a company that values...</p>    </div>  </div>  <div class="flex flex-wrap justify-center mt-10">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3">  </div>  <div class="mt-10 text-center">    <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p>  </div>  <style>    @media (prefers-color-scheme: dark) {      .bg-gray-800 { background-color: #1a1a1a; }      .text-white { color: #f0f0f0; }      .hover\:text-gray-400:hover { color: #a0a0a0; }    }  </style> </footer>