Composant Profils utilisateur
Il s’agit d’un composant complexe et réactif pour les sites Web d’actualités et de journalisme, doté d’un design inspiré du Bauhaus avec une palette de couleurs vives et sucrées et la prise en charge du mode sombre. Affiche plusieurs profils d’utilisateurs avec des photos de profil, des noms, des titres et le nombre d’abonnés, conçus pour une interface riche.
HTML Code
<div class="font-sans bg-pink-100 text-purple-900 min-h-screen p-4 sm:p-8 dark:bg-purple-900 dark:text-pink-100 transition-colors duration-300">
<div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-8 sm:mb-12 dark:text-pink-300 tracking-tight leading-tight uppercase relative">
<span class="block">Our Esteemed Contributors</span>
<span class="block text-2xl sm:text-3xl text-purple-600 dark:text-pink-200 mt-2 font-medium">Meet the Minds Behind the Stories</span>
<div class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-purple-500 dark:bg-pink-400 mt-4 rounded-full"></div>
</h1>
<p class="text-center text-lg sm:text-xl mb-12 sm:mb-16 max-w-3xl mx-auto dark:text-purple-200">
Discover the talented individuals who bring you the latest news and in-depth analysis. Each profile offers a glimpse into their expertise and contributions.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">
<!-- Profile Card 1 -->
<article class="relative bg-gradient-to-br from-pink-300 to-red-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-indigo-600 dark:to-blue-800">
<div class="absolute inset-0 bg-pink-400 opacity-20 dark:bg-blue-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Jane Doe</h2>
<p class="text-lg text-pink-900 font-semibold mb-3 dark:text-purple-300">Senior Journalist</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">5.2K Followers</span>
</div>
<p class="text-sm text-pink-900 mb-6 line-clamp-3 dark:text-purple-200">Specializing in investigative journalism and political analysis. Jane has been breaking stories for over a decade...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 transform hover:scale-105 transition-all duration-200 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
<!-- Profile Card 2 -->
<article class="relative bg-gradient-to-br from-blue-300 to-green-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-pink-600 dark:to-orange-800">
<div class="absolute inset-0 bg-blue-400 opacity-20 dark:bg-orange-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Profile of John Smith">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">John Smith</h2>
<p class="text-lg text-blue-900 font-semibold mb-3 dark:text-purple-300">Tech Editor</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">8.1K Followers</span>
</div>
<p class="text-sm text-blue-900 mb-6 line-clamp-3 dark:text-purple-200">Covering the latest in gadgets, software, and digital trends. John's insights are always cutting-edge...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transform hover:scale-105 transition-all duration-200 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
<!-- Profile Card 3 -->
<article class="relative bg-gradient-to-br from-yellow-300 to-orange-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-green-600 dark:to-teal-800">
<div class="absolute inset-0 bg-yellow-400 opacity-20 dark:bg-teal-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile of Emily White">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Emily White</h2>
<p class="text-lg text-orange-900 font-semibold mb-3 dark:text-purple-300">Culture Reporter</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">3.9K Followers</span>
</div>
<p class="text-sm text-orange-900 mb-6 line-clamp-3 dark:text-purple-200">Exploring arts, entertainment, and social trends. Emily brings a fresh perspective to cultural discourse...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-orange-600 text-white font-bold rounded-full shadow-lg hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 transform hover:scale-105 transition-all duration-200 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
<!-- Profile Card 4 -->
<article class="relative bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-red-600 dark:to-yellow-800">
<div class="absolute inset-0 bg-purple-400 opacity-20 dark:bg-yellow-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile of David Lee">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">David Lee</h2>
<p class="text-lg text-indigo-900 font-semibold mb-3 dark:text-purple-300">Sports Analyst</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">6.7K Followers</span>
</div>
<p class="text-sm text-indigo-900 mb-6 line-clamp-3 dark:text-purple-200">Providing expert analysis on global sports events. David's predictions are a must-read for any fan...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transform hover:scale-105 transition-all duration-200 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
<!-- Profile Card 5 -->
<article class="relative bg-gradient-to-br from-teal-300 to-cyan-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-purple-600 dark:to-fuchsia-800">
<div class="absolute inset-0 bg-teal-400 opacity-20 dark:bg-fuchsia-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/72.jpg" alt="Profile of Sarah Chen">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Sarah Chen</h2>
<p class="text-lg text-cyan-900 font-semibold mb-3 dark:text-purple-300">Economics Correspondent</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">4.5K Followers</span>
</div>
<p class="text-sm text-cyan-900 mb-6 line-clamp-3 dark:text-purple-200">Reporting on global market trends and economic policies. Sarah's analysis clarifies complex financial news...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-bold rounded-full shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 transform hover:scale-105 transition-all duration-200 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 dark:focus:ring-fuchsia-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
<!-- Profile Card 6 -->
<article class="relative bg-gradient-to-br from-lime-300 to-emerald-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-cyan-600 dark:to-lime-800">
<div class="absolute inset-0 bg-lime-400 opacity-20 dark:bg-lime-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile of Mark Johnson">
<h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Mark Johnson</h2>
<p class="text-lg text-emerald-900 font-semibold mb-3 dark:text-purple-300">Science Editor</p>
<div class="flex items-center text-white mb-4">
<svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
<span class="text-yellow-100 font-bold">7.0K Followers</span>
</div>
<p class="text-sm text-emerald-900 mb-6 line-clamp-3 dark:text-purple-200">Breaking down complex scientific discoveries into understandable news. Mark's passion for science is infectious...</p>
<a href="#" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white font-bold rounded-full shadow-lg hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 transform hover:scale-105 transition-all duration-200 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
View Profile
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</article>
</div>
<div class="flex justify-center mt-12 sm:mt-16">
<button class="px-8 py-4 bg-purple-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-300 transform hover:scale-105 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-400">
Load More Contributors
</button>
</div>
</div>
</div>Composants associés
Profil d’utilisateur Simple Card
Carte de profil d’utilisateur réactive avec CSS Tailwind, conception matérielle, schéma de couleurs Earth Tones. Mode sombre pris en charge, pas besoin de JS.
Carte de profil d’utilisateur neumorphe - Pastel
Une carte de profil utilisateur simple et réactive avec un design neumorphique sur le thème du pastel, adaptée aux portfolios, y compris la prise en charge du mode sombre.
Composant Profils utilisateur
Un composant de profils d’utilisateurs pour les sites Web agricoles, avec un style de design industriel avec des couleurs sourdes, des avatars d’utilisateurs, des rôles et des informations de localisation. Il est réactif et prend en charge le mode sombre.