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
Neumorfismo Earth Footer
Componente piè di pagina reattivo con supporto per neumorfismo, toni della terra e tema scuro
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.
Dissolvenza in entrata del piè di pagina 3D
Piè di pagina reattivo con elementi di design 3D e supporto per la modalità scura