Componente Componenti sociali
Un semplice componente reattivo per i social media con animazioni accattivanti e un tema scuro, che utilizza Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
</div>
<div class="flex space-x-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Like
</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Comment
</button>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
Share
</button>
</div>
</div>Componenti correlati
Componente Componenti sociali
Un componente di social media reattivo con supporto della modalità oscura per i siti Web aziendali, con una combinazione di colori triadica.
Componente Componenti sociali
Un componente del portfolio progettato in modalità oscura con una combinazione di colori monocromatica. Mette in mostra lavori o prodotti con un layout semplice.
Componente Componenti sociali
Una componente sociale brutalista, complessa e incentrata sull'e-commerce con una combinazione di colori analoga, implementata con Tailwind CSS. È reattivo e supporta la modalità oscura.