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
Composante sociale du skeuomorphisme
Composant de médias sociaux avec conception Skeuomorphism, effets réactifs et prise en charge du thème sombre.
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.
Volet Composantes sociales
Une section de composants sociaux simple et réactive pour un tableau de bord, avec une palette de couleurs monochromatique et un design inspiré du Skeuomorphisme.