Componente piè di pagina neumorfico
Un componente piè di pagina in stile neumorfico per interfacce di social media con colori vivaci e un layout complesso, che supporta la modalità scura.
Codice HTML
<footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
<div class="flex flex-col items-center">
<div class="flex space-x-6 mb-4">
<a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
<img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
</a>
<a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
<img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
</a>
<a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
<img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
</a>
<a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
<img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
</a>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
</div>
</footer>Componenti correlati
Acquerello/Piè di pagina artistico al neon
Un componente piè di pagina semplice e reattivo con un'estetica acquerello/artistica e una vivace combinazione di colori al neon, adatto per un sito Web di portfolio. Include il supporto per la modalità oscura.
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.
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.