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.
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
Volet Composantes sociales
Il s’agit d’un composant social complexe et dynamique pour les pages de blog/contenu, axé sur les micro-interactions avec les boutons de partage, les likes, les commentaires et l’enregistrement. Comprend une réactivité complète et la prise en charge du mode sombre.
Volet Composantes sociales
Un composant de médias sociaux réactif conçu avec le style Neumorphism et la prise en charge du thème sombre, avec une mise en page simple et des éléments minimaux.
Volet Composantes sociales
Un composant de médias sociaux de style rétro/vintage doté d’une interface riche avec de multiples éléments interactifs, conçu avec des couleurs complémentaires et prenant en charge le mode sombre.