Componente Pulsanti di condivisione social
Un componente minimalista per i pulsanti di condivisione social progettato con Tailwind CSS, con layout reattivo e supporto per temi scuri. Il componente include pulsanti per la condivisione su piattaforme di social media popolari con elementi di design puliti e semplici.
Codice HTML
<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
<span class="text-gray-800 dark:text-gray-200">Share with:</span>
</div>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
</a>
</div>Componenti correlati
Pulsanti di condivisione social skeuomorfi
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza Tailwind CSS. Presenta sfumature, ombre ed effetti hover/attivi per simulare i pulsanti fisici. Il componente è reattivo e include il supporto della modalità oscura tramite CSS. Contiene pulsanti per Facebook, Twitter, LinkedIn e un pulsante generico di copia del link.
Pulsanti di condivisione social Componente 51
Un componente reattivo dei pulsanti di condivisione social progettato con principi di progettazione scheumorfici, con pulsanti che imitano gli oggetti del mondo reale e supporto per il tema scuro. Il componente è formattato utilizzando Tailwind CSS e include immagini segnaposto da picsum.photos e avatar da randomuser.me.
Pulsanti di condivisione social skeuomorfi
Componente reattivo dei pulsanti di condivisione social con design scheumorfo, combinazione di colori monocromatica e interazioni complesse, con supporto per temi scuri. Progettato per blog e siti di contenuti.