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.
Codice HTML
<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
<button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
<button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
</div>
</div>Componenti correlati
Componente Componenti sociali
Un semplice componente social progettato con uno stile scheumorfico utilizzando colori vivaci per un sito aziendale professionale, design reattivo con supporto per la modalità oscura.
Componente Componenti sociali
Un componente sociale incentrato sulle microinterazioni per i blog con animazioni accattivanti e una combinazione di colori monocromatici.
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.