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
Un composant social simple et élégant conçu pour les plateformes musicales et audio avec une palette de couleurs à contraste élevé et un style luxueux, avec le profil de l’utilisateur, les abonnés et les mesures d’engagement. Entièrement réactif avec prise en charge du mode sombre.
Volet Composantes sociales
Une composante sociale pour un tableau de bord au design brutaliste et pastel. Il affiche un profil utilisateur avec un nom, un titre et un avatar, et comprend des boutons pour les actions sociales telles que le suivi, la messagerie et le partage. Le composant est réactif et prend en charge le mode sombre.
Social_Components_Documentation_Wiki
Un composant social complexe et réactif pour les sites de documentation/wiki, avec des dégradés de couleurs automnaux et des transitions douces avec prise en charge du mode sombre.