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
Un componente social complesso e vivace per blog/pagine di contenuti, incentrato sulle microinterazioni con pulsanti di condivisione, Mi piace, commenti e salvataggio. Include la reattività completa e il supporto per la modalità scura.
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.
Componente Componenti sociali
Una componente social per una cruscotto dal design brutalista e pastello. Visualizza un profilo utente con un nome, un titolo e un avatar e include pulsanti per azioni sociali come seguire, inviare messaggi e condividere. Il componente è reattivo e supporta la modalità scura.