Componente Componenti sociali
Un componente social brutalista che mostra un design audace con contrasto elevato, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Presenta avatar utente, collegamenti ai social media e immagini segnaposto.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">John Doe</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Jane Smith</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Alice Johnson</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Bob Brown</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
<div class="flex space-x-4 mt-2">
<a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
<a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
</div>
</div>
</div>
Componenti correlati
Componente Componenti sociali
Componente Componenti Social Retrò/Vintage con combinazione di colori monocromatica e complessità semplice, progettato per blog/contenuti, con supporto per temi scuri.
Componente Componenti sociali
Un semplice componente di social media progettato con scheumorfismo e una combinazione di colori monocromatici per i contenuti del blog. È dotato di un layout reattivo e del supporto per i temi scuri utilizzando Tailwind CSS.
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.