Composantes sociales
Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
<p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="text-right">
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts →</a>
</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é.
Volet Composantes sociales
Un composant social simple conçu avec un style skeuomorphe utilisant des couleurs vives pour un site d’entreprise professionnel, un design réactif avec 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.