Composants Composantes sociales Volet Composantes sociales

Volet Composantes sociales

Un composant de médias sociaux conçu pour un portfolio, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend des espaces réservés pour les avatars et les noms des utilisateurs.

Aperçu

HTML Code

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
  </div>
  <p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
  <div class="flex justify-between items-center mt-6">
    <div class="flex space-x-4">
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </div>
    <span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
  </div>
</div>

Composants associés

Carte d’auteur 3D Social

Un composant de carte d’auteur réactif avec des effets 3D et des liens vers les réseaux sociaux, conçu pour les sections de blog/contenu. Il dispose d’un schéma de couleurs complémentaires (bleu pour l’identité/les infos, orange pour les accents/CTA), prend en charge le mode sombre et utilise Tailwind CSS pour le style. Le design est d’une complexité « simple » avec une mise en page de base et des éléments minimaux, mais le « design 3D » est incorporé pour la profondeur et l’engagement en utilisant des ombres et des effets de survol. Le composant comprend un avatar, le nom de l’auteur, une courte biographie, des icônes de médias sociaux et un bouton d’appel à l’action « Suivez-moi ». Il utilise un avatar randomuser.me comme espace réservé.

Ouvrir