Componente Componenti sociali
Componente Componenti Social Retrò/Vintage con combinazione di colori monocromatica e complessità semplice, progettato per blog/contenuti, con supporto per temi scuri.
Codice HTML
```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>
```Componenti correlati
Componenti sociali
Un componente sociale scheumorfico progettato per blog/contenuti con colori vivaci e supporto per la modalità scura.
Scheda Autore Social 3D
Un componente reattivo della scheda autore con effetti 3D e collegamenti ai social media, progettato per le sezioni di blog/contenuti. Presenta una combinazione di colori complementari (blu per identità/informazioni, arancione per accenti/CTA), supporta la modalità oscura e utilizza Tailwind CSS per lo stile. Il design è di complessità "semplice" con un layout di base ed elementi minimi, ma il "design 3D" è incorporato per la profondità e il coinvolgimento utilizzando ombre ed effetti di passaggio del mouse. Il componente include un avatar, il nome dell'autore, una breve biografia, icone dei social media e un pulsante di invito all'azione "Seguimi". Utilizza un avatar randomuser.me come segnaposto.
Componente Componenti sociali
Un componente per social media in stile retrò/vintage caratterizzato da una ricca interfaccia con più elementi interattivi, progettato con colori complementari e che supporta la modalità oscura.