Componente Pulsanti di condivisione social
Un componente reattivo per i pulsanti di condivisione social con un design 3D che incorpora elementi tridimensionali per garantire profondità e coinvolgimento. Supporta i temi scuri con CSS.
Codice HTML
<div class="flex justify-center space-x-4 p-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
<i class="fab fa-facebook-f"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
<i class="fab fa-twitter"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
<i class="fab fa-linkedin-in"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
<i class="fab fa-instagram"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Componenti correlati
Pulsanti di condivisione social
Componente reattivo dei pulsanti di condivisione social con supporto per temi scuri, design brutalista, combinazione di colori analoga e interazioni complesse, costruito con Tailwind CSS per un sito Web di portfolio.
Componente Pulsanti di condivisione social
Un componente minimalista dei pulsanti di condivisione social progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social progettato in uno stile glassmorphism con una combinazione di colori monocromatica per i siti di e-commerce. È dotato di elementi traslucidi simili al vetro smerigliato, include più pulsanti interattivi per la condivisione sui social media e supporta la modalità oscura utilizzando Tailwind CSS.