Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social con un'estetica retrò/vintage degli anni '80/'90, con supporto per temi scuri utilizzando Tailwind CSS e immagini segnaposto.
Codice HTML
<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
<h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Facebook</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Twitter</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Instagram</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
</a>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
</div>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Una serie di pulsanti di condivisione sui social media progettati con un'estetica monospace/sviluppatore, combinazione di colori blu aziendale e piena reattività. Include il supporto per la modalità oscura.
Componente Pulsanti di condivisione social
Un componente di pulsanti di condivisione social retrò/vintage con una combinazione di colori monocromatica. Si tratta di un design complesso e reattivo con supporto per temi scuri, adatto per un portfolio. Utilizza Tailwind CSS senza JavaScript.
Componente Pulsanti di condivisione social
Un componente elegante e reattivo per i pulsanti di condivisione social progettato per i siti Web di notizie e giornalismo, con una lussuosa tavolozza di colori foresta/verde e supporto per la modalità scura. Include più elementi interattivi per la condivisione di articoli su varie piattaforme.