Componente Pulsanti di condivisione social
Un componente reattivo e minimalista per i pulsanti di condivisione social progettato con uno stile tipografico svizzero/internazionale, utilizzando una combinazione di colori in scala di grigi. È adatto per bacheche di lavoro o piattaforme di sviluppo della carriera, offrendo opzioni di condivisione pulite per varie piattaforme di social media.
Codice HTML
<div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-center tracking-tight">Share Job Opportunity</h2>
<p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">Help others discover this exciting role. Share it with your network!</p>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
<!-- LinkedIn -->
<a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<svg class="h-5 w-5 mr-2 text-blue-700 dark:text-blue-500 group-hover:text-blue-800 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zM.02 24h4.96V8.12H.02V24zM9.01 7.9H13.9C13.9 7.9 14.18 7.55 14.07 6.45C13.94 4.09 11.45 3.5 10.63 3.5C8.83 3.5 7.14 4.41 7.01 7.9L9.01 7.9C9.01 7.9 9.01 7.9 9.01 7.9zM7.05 9.9H9.01V24H7.05V9.9zM19.01 7.9H24.01V24H19.01V7.9zM19.01 7.9C19.01 7.9 19.38 7.01 19.74 6.78C20.61 6.13 21.41 6.09 21.84 6.09C22.28 6.09 23.36 6.09 23.36 6.09V3.5h-5.18C17.72 3.5 14.7 3.5 13.9 3.5C13.06 3.5 11.41 3.73 10.74 4.88C10.05 6.03 10.01 7.9 10.01 7.9H19.01V7.9z"/>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
</a>
<!-- Twitter/X -->
<a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F10 16.92V11.25L4.47 2.25H1.5L9.303 12.875L1.07 21.75H8.9L14.542 13.625l5.666 8.125h3.407L16.2 8.725L18.244 2.25h-0.001zm-0.403 1.344l-5.632 6.745l-3.326-6.745H2.8l7.545 10.79L2.534 21.75h3.385l5.63-6.745l3.326 6.745h6.635l-7.547-10.79L21.196 2.25h-2.95z"/>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter/X</span>
</a>
<!-- Facebook -->
<a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<svg class="h-5 w-5 mr-2 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M15.42 16.9v-2.31h2.51l.39-2.78H15.42V9.69c0-.66.2-1.12 1.15-1.12h1.22V5.41s-1.1-.19-2.16-.19c-2.2 0-3.6 1.34-3.6 3.73v2.09h-2.45v2.78h2.45V24h5.02V16.9h-1.9zM12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24z"/>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
</a>
<!-- Email -->
<a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
<svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
</a>
<!-- WhatsApp (on mobile/tablet) -->
<a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-1">
<svg class="h-5 w-5 mr-2 text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.04 2C7.34 2 3.58 5.76 3.58 10.46c0 1.5.4 2.94 1.16 4.22L3 21l6.3-1.65a8.48 8.48 0 005.14 1.83c4.7 0 8.46-3.76 8.46-8.46S16.74 2 12.04 2zM17.2 15.6c-.19.3-.74.6-1.04.6-.29 0-.58-.1-.85-.3L14.2 14.7c-.24-.13-1.47-.7-1.7-.85-.23-.15-.4-.2-.58.2-.18.4-.7.8-.85.96-.15.15-.3.2-.5.2-.2 0-.38-.07-.5-.15-.17-.11-.74-.27-.9-.45-.15-.15-.36-.45-.5-.7-.14-.23-.05-.4-.05-.6 0-.2.15-.3.2-.38.05-.08.1-.15.2-.2.1-.08.2-.15.3-.2.08-.06.12-.1.17-.18.06-.08.12-.2.17-.28.05-.08.1-.17.15-.25.04-.08.06-.13.06-.2 0-.05-.02-.1-.04-.13-.02-.03-.1-.08-.18-.17-.08-.1-.13-.15-.2-.2-.07-.07-.15-.1-.23-.17-.08-.07-.17-.15-.25-.23-.08-.08-.15-.15-.23-.2-.07-.06-.05-.1-.05-.17 0-.08-.0-.14.1-.2.2-.23.47-.5.7-.7.2-.2.4-.3.6-.5.2-.2.37-.3.5-.4-.1.1-.2.2-.3.3-.2.2-.4.3-.6.5-.2.2-.2.3-.2.5 0 .2.1.4.1.4.1.2.2.3.4.5.2.2.3.2.4.2.2 0 .4-.07.6-.07.2 0 .3-.1.4-.2.1-.06.15-.1.2-.1.2-.1.4-.2.6-.3.2-.1.3-.2.4-.2.2-.07.3-.1.4-.1.2 0 .4.07.6.07.2 0 .4.03.6.07.2.1.4.2.5.3.1.06.2.1.2.1.15.1.2.16.2.2.06.07.2.17.2.3.06.1.1.2.17.3l.05.08c.1.2.1.4.1.6 0 .2-.06.4-.13.6-.07.2-.16.4-.25.5-.09.2-.17.3-.28.4l-.08.05c-.1.08-.2.15-.3.2-.1.1-.2.15-.3.2-.2.1-.4.2-.6.3-.2.1-.3.2-.5.3-.2.1-.4.2-.6.2-.2 0-.4.02-.6.02-.27 0-.5-.03-.7-.1.0-.08 0-.15 0-.23z"/>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
</a>
<!-- Copy URL -->
<button aria-label="Copy link to clipboard" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-3" onclick="navigator.clipboard.writeText('https://your-job-link.com/job-id').then(function() { alert('Link copied to clipboard!'); });">
<svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
</svg>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
</button>
</div>
</div>Componenti correlati
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.
Pulsanti di condivisione social del tono della terra scheumorfo
Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza i toni della terra. Le caratteristiche includono il layout reattivo e il supporto della modalità oscura con effetti di stampa interattivi al passaggio del mouse, costruiti esclusivamente con le classi HTML e Tailwind CSS.
Componente Pulsanti di condivisione social
Componente Social Share Buttons per l'e-commerce in modalità scura utilizzando Tailwind CSS. Semplice, reattivo e in scala di grigi.