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
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.
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
Un componente social semplice ed elegante progettato per piattaforme musicali e audio con una combinazione di colori ad alto contrasto e uno stile lussuoso, con profilo utente, follower e metriche di coinvolgimento. Completamente reattivo con supporto per la modalità oscura.