Volet Composantes sociales
Composant social rétro/vintage avec palette de couleurs monochromatique et complexité simple, conçu pour les blogs/contenus, avec prise en charge du thème sombre.
HTML Code
```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
<div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
<p class="dark:text-gray-300 text-gray-700 text-base">
This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
</div>
<div class="flex items-center px-6 py-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
<p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
</div>
</div>
</div>
</div>
```Composants associés
Volet Composantes sociales
Un composant de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.
Volet Composantes sociales
Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.
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é.