User Profiles Component
A user profiles component for agricultural/farming websites, featuring an industrial design style with muted colors, user avatars, roles, and location info. It's responsive and supports dark mode.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 sm:mb-12 text-center">
Our Team in the Field
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Profile Card 1 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Farmer
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/75.jpg" alt="John Doe">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Lead Agronomist</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Specializing in crop rotation and soil health management for sustainable agriculture.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">Midwest Region, USA</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
<!-- Profile Card 2 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Analyst
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Jane Smith">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Data Scientist</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Leveraging satellite imagery and AI for optimal crop yield predictions and resource allocation.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">Southern Europe</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
<!-- Profile Card 3 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Engineer
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Peter Brown">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Peter Brown</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Robotics Engineer</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Designing and deploying autonomous farm machinery to enhance efficiency and reduce labor costs.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">Northern Plains, Canada</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
<!-- Profile Card 4 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Researcher
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Sarah Lee">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sarah Lee</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Livestock Specialist</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Focused on animal welfare, nutrition, and sustainable pasture management for livestock farming.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">Australia Farmlands</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
<!-- Profile Card 5 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Manager
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="David Green">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">David Green</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Operations Manager</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Overseeing day-to-day farm operations, logistics, and supply chain management for efficiency.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">South America</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
<!-- Profile Card 6 -->
<div class="relative bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="absolute top-0 right-0 -m-2 p-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase rounded-bl-lg">
Specialist
</div>
<div class="flex flex-col items-center text-center">
<img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4 object-cover" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Emily White">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Emily White</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1 mb-3">Farm Sustainability Advisor</p>
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">Guiding farms towards eco-friendly practices, carbon neutrality, and biodiversity preservation.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0116.727 17.657L6.343 7.273m11.314 9.454l-9.454-9.454m0 0A8 8 0 017.273 6.343L16.727 17.657"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21.25c-5.522 0-10-4.478-10-10s4.478-10 10-10 10 4.478 10 10-4.478 10-10 10z"></path></svg>
<span class="font-medium">Pacific Northwest, USA</span>
</div>
<a href="#" class="mt-4 inline-block px-5 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md transition-colors duration-200">
View Profile
</a>
</div>
</div>
</div>
</div>
</div>Related Components
User Profiles Component
A responsive User Profile component with Neumorphism design and dark mode support.
User Profiles Component
A complex, responsive user profiles component for news/journalism websites, featuring a Bauhaus-inspired design with a bright candy/sweet color scheme and dark mode support. Displays multiple user profiles with profile pictures, names, titles, and follower counts, designed for a rich interface.
User Profile Simple Card
Responsive User Profile Card with Tailwind CSS, Material Design, Earth Tones Color Scheme. Dark mode supported, No JS needed.