Componente Componenti sociali
Un componente per social media progettato per un portfolio, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Include segnaposto per avatar e nomi degli utenti.
Codice HTML
<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>Componenti correlati
Componente Componenti sociali
Un componente del feed social per gli aggiornamenti meteo, con sfumature di colore, colori triadici ed elementi interattivi. Reattivo con supporto per la modalità oscura.
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.
Componenti sociali
Una sezione di componenti sociali progettata in stile scheumorfico, con effetti reattivi e supporto per temi scuri.