Composant Boutons de partage social
Composant de boutons de partage social avec un design rétro/vintage, une palette de couleurs de tons de terre, un niveau de complexité simple et un design réactif avec prise en charge du thème sombre, à des fins de médias sociaux à l’aide de Tailwind CSS.
HTML Code
<div class="flex flex-wrap justify-center space-x-4 p-4 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md">
<!-- Facebook Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12a10 10 0 009.21 9.95V14.41H9.13V12h2.08V9.39c0-2.06 1.262-3.182 3.098-3.182 1.082 0 2.007.08 2.27.116v2.485h-1.463c-1.145 0-1.362.545-1.362 1.343V12h2.738l-.356 2.41h-2.382v7.55A10.001 10.001 0 0022 12C22 6.477 17.523 2 12 2z"/>
</svg>
<span class="font-mono text-sm">Facebook</span>
</a>
<!-- Twitter Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 4.557a9.983 9.983 0 01-2.828.775A4.993 4.993 0 0022.18 2.23a9.99 9.99 0 01-3.14 1.2c-1.12-.56-2.44-1-3.77-.96a4.995 4.995 0 00-4.994 4.994c0 .39.043.77.123 1.13C8.788 8.192 5.95 6.61 3.715 4.284a4.995 4.995 0 001.55 6.656A4.98 4.98 0 013.16 10.19v.06a4.994 4.994 0 004 4.9V15a4.995 4.995 0 01-4.472 2.177 9.999 9.999 0 005.43 1.59c6.515 0 10.075-5.38 10.075-10.08v-.475c.69-.5 1.288-1.127 1.86-1.81zm-4.45 2.19a.88.88 0 00-.04.17l-.2 1.2a.88.88 0 00.15.71c.19.21.45.33.73.38l1.3.18a.88.88 0 00.15.01c.47-.06.8-.47.74-.94l-.17-1.14a.88.88 0 00-.16-.7l-.7-.7a.88.88 0 00-.7-.16l-1.23-.17a.88.88 0 00-.2 0z"/>
</svg>
<span class="font-mono text-sm">Twitter</span>
</a>
<!-- Instagram Button -->
<a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2C8.41 2 7.98 2.01 6.61 2.07 5.24 2.13 4.36 2.32 3.62 2.65c-.73.33-1.35.78-1.97 1.4s-1.07 1.24-1.4 1.97c-.33.74-.52 1.6-.58 2.97-.07 1.37-.08 1.8-.08 5.39s.01 4.02.07 5.39c.06 1.38.25 2.26.58 2.97.33.73.78 1.35 1.4 1.97s1.24 1.07 1.97 1.4c.71.33 1.59.52 2.97.58 1.37.07 1.8.08 5.39.08s4.02-.01 5.39-.07c1.38-.06 2.26-.25 2.97-.58.73-.33 1.35-.78 1.97-1.4s1.07-1.24 1.4-1.97c.33-.71.52-1.59.58-2.97.07-1.37.08-1.8.08-5.39s-.01-4.02-.07-5.39c-.06-1.38-.25-2.26-.58-2.97-.33-.73-.78-1.35-1.4-1.97s-1.24-1.07-1.97-1.4c-.71-.33-1.59-.52-2.97-.58C16.02 2.01 15.59 2 12 2zm0 3.87c3.31 0 6.03 2.72 6.03 6.03s-2.72 6.03-6.03 6.03S5.97 15.21 5.97 12c0-3.31 2.72-6.03 6.03-6.03zm0 2.39c2.01 0 3.64 1.63 3.64 3.64s-1.63 3.64-3.64 3.64S8.36 14.01 8.36 12c0-2.01 1.63-3.64 3.64-3.64zm6.4-3.44c-.85 0-1.54.69-1.54 1.54s.69 1.54 1.54 1.54 1.54-.69 1.54-1.54-.69-1.54-1.54-1.54z"/>
</svg>
<span class="font-mono text-sm">Instagram</span>
</a>
</div>Composants associés
Composant Boutons de partage social
Un composant rétro/vintage des boutons de partage social avec une palette de couleurs monochromatiques. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, adapté à un portefeuille. Utilise Tailwind CSS sans JavaScript.
Skeuomorphic Earth Tone Boutons de partage social
Un ensemble de boutons de partage social stylisés dans un design Skeuomorphic utilisant des tons de terre. Les fonctionnalités incluent une mise en page réactive et la prise en charge du mode sombre avec des effets de presse interactifs au survol, construits uniquement avec des classes HTML et Tailwind CSS.
Composant Boutons de partage social
Un composant simple et réactif de boutons de partage social avec une esthétique inspirée du design de Memphis utilisant des couleurs neutres et froides, adapté aux outils CRM/professionnels. Inclut la prise en charge du mode sombre.