Componenti sociali
Un componente sociale scheumorfico progettato per blog/contenuti con colori vivaci e supporto per la modalità scura.
Codice HTML
<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
<p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="text-right">
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts →</a>
</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 di social media retrò/vintage con un layout semplice e una combinazione di colori complementari. Supporta la modalità oscura ed è reattivo.
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.