Componente Componenti sociali
Un componente di social media reattivo progettato con lo stile Neumorphism e il supporto del tema scuro, caratterizzato da un layout semplice ed elementi minimali.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">@john_doe</p>
</div>
</div>
<p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
<img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
<div class="mt-4 flex justify-between">
<button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
<button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
</div>
</div>Componenti correlati
Componente sociale dello scheumorfismo
Componente social media con design Skeuomorphism, effetti reattivi e supporto per temi scuri.
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.
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.