Componente Pulsanti di condivisione social
Un componente del pulsante di condivisione social in scala di grigi 3D semplice e reattivo per dashboard con supporto per la modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
<!-- Facebook -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
</a>
<!-- Twitter -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
</a>
<!-- LinkedIn -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
</a>
<!-- Instagram -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
</a>
</div>
</div>Componenti correlati
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.
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.
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.