Componente Profili utente
Un componente dei profili utente progettato in uno stile brutalista con una combinazione di colori triadica, caratterizzata da una complessità moderata adatta al consumo di blog/contenuti e un design reattivo con supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Profile 1 -->
<div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-gray-700 dark:text-gray-200">Content Writer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
</p>
<img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 2 -->
<div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
<p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
</p>
<img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 3 -->
<div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
<p class="text-gray-700 dark:text-gray-200">Web Developer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
</p>
<img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
</div>
</div>
Componenti correlati
Componente Profili utente
Un componente del profilo utente reattivo con microinterazioni, combinazione di colori in scala di grigi, layout complesso, supporto per la modalità oscura e immagini/avatar casuali.
Scheda profilo utente neumorfico - Pastello
Una scheda profilo utente semplice e reattiva con un design neumorfico a tema pastello, adatta per i portfolio, incluso il supporto della modalità scura.
Profilo utente Scheda semplice
Scheda del profilo utente reattiva con CSS Tailwind, Material Design, combinazione di colori dei toni della terra. Modalità oscura supportata, non è necessario JS.