Composant Boutons de partage social
Un composant réactif et minimaliste des boutons de partage social conçu avec un style de typographie suisse/international, en utilisant une palette de couleurs en niveaux de gris. Il convient aux sites d’emploi ou aux plateformes de développement de carrière, offrant des options de partage propres pour diverses plateformes de médias sociaux.
HTML Code
<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>Composants associés
Composant Boutons de partage social
Un composant réactif de boutons de partage social avec un style de conception skeuomorphe qui imite ses homologues du monde réel, avec la prise en charge du thème sombre.
Composant Boutons de partage social
Un composant réactif de boutons de partage social stylisé avec une esthétique rétro/vintage des années 80/90, avec la prise en charge du thème sombre à l’aide de Tailwind CSS et d’images de remplacement.
Composant Boutons de partage social
Composant de boutons de partage social avec un design brutaliste, une palette de couleurs vives et un niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.