Componente Componenti sociali
Un componente sociale incentrato sulle microinterazioni per i blog con animazioni accattivanti e una combinazione di colori monocromatici.
Codice HTML
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
<div>
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
<img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
<div class="flex items-center space-x-4">
<button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
</svg>
Share
</button>
<button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
</svg>
Comment
</button>
</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.
Componente Componenti sociali
Una scheda social media semplice e reattiva per contenuti di notizie/giornalismo con un'estetica industriale e una combinazione di colori autunnali, incluso il supporto della modalità scura.
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.