Composants Boutons de partage social Composant Boutons de partage social

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.

Aperçu

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

Boutons de partage social Composant 51

Un composant réactif de boutons de partage social conçu selon les principes de conception skeuomorphique, avec des boutons qui imitent des objets du monde réel et prenant en charge le thème sombre. Le composant est stylisé à l’aide de Tailwind CSS et comprend des images de substitution de picsum.photos et des avatars de randomuser.me.

Ouvrir