Team Components
Beautiful team components built with TailwindCSS. Perfect for showcasing your team members with cards, grids, and layouts.
1. Simple Team Member Card
Clean and simple team member card with avatar, name, role, and social links.
<!-- Simple Team Member Card -->
<div class="max-w-sm mx-auto">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="John Doe" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-purple-600 font-medium mb-4">CEO & Founder</p>
<p class="text-gray-600 text-sm mb-4">Passionate about building great products and leading amazing teams. With over 10 years of experience in tech leadership.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</div>
</div>
</div>
</div><template>
<!-- Simple Team Member Card -->
<div class="max-w-sm mx-auto">
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="John Doe" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-purple-600 font-medium mb-4">CEO & Founder</p>
<p class="text-gray-600 text-sm mb-4">Passionate about building great products and leading amazing teams. With over 10 years of experience in tech leadership.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</template>export default function SimpleTeamMemberCard() {
return (
<div className="max-w-sm mx-auto">
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<div className="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="John Doe" className="w-full h-full object-cover" />
</div>
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-1">John Doe</h3>
<p className="text-purple-600 font-medium mb-4">CEO & Founder</p>
<p className="text-gray-600 text-sm mb-4">Passionate about building great products and leading amazing teams. With over 10 years of experience in tech leadership.</p>
<div className="flex space-x-4">
<a href="#" className="text-gray-400 hover:text-purple-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" className="text-gray-400 hover:text-purple-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" className="text-gray-400 hover:text-purple-600 transition-colors">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
);
}2. Team Grid Layout
Responsive grid layout for displaying multiple team members with consistent spacing.
John Doe
CEO & Founder
Leading the vision and strategy for our company.
Jane Smith
CTO
Driving technical innovation and development.
Mike Johnson
Lead Designer
Creating beautiful user experiences and interfaces.
Sarah Wilson
Marketing Director
Building brand awareness and customer engagement.
<!-- Team Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Team Member 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-blue-600 font-medium text-sm mb-2">CEO & Founder</p>
<p class="text-gray-600 text-xs">Leading the vision and strategy for our company.</p>
</div>
</div>
<!-- Team Member 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p className="text-green-600 font-medium text-sm mb-2">CTO</p>
<p className="text-gray-600 text-xs">Driving technical innovation and development.</p>
</div>
</div>
<!-- Team Member 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p className="text-purple-600 font-medium text-sm mb-2">Lead Designer</p>
<p className="text-gray-600 text-xs">Creating beautiful user experiences and interfaces.</p>
</div>
</div>
<!-- Team Member 4 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p className="text-red-600 font-medium text-sm mb-2">Marketing Director</p>
<p className="text-gray-600 text-xs">Building brand awareness and customer engagement.</p>
</div>
</div>
</div><template>
<!-- Team Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Team Member 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-blue-600 font-medium text-sm mb-2">CEO & Founder</p>
<p class="text-gray-600 text-xs">Leading the vision and strategy for our company.</p>
</div>
</div>
<!-- Team Member 2 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p class="text-green-600 font-medium text-sm mb-2">CTO</p>
<p class="text-gray-600 text-xs">Driving technical innovation and development.</p>
</div>
</div>
<!-- Team Member 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p class="text-purple-600 font-medium text-sm mb-2">Lead Designer</p>
<p class="text-gray-600 text-xs">Creating beautiful user experiences and interfaces.</p>
</div>
</div>
<!-- Team Member 4 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div class="h-32 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p class="text-red-600 font-medium text-sm mb-2">Marketing Director</p>
<p class="text-gray-600 text-xs">Building brand awareness and customer engagement.</p>
</div>
</div>
</div>
</template>export default function TeamGridLayout() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Team Member 1 -->
<div className="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div className="h-32 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" className="w-full h-full object-cover" />
</div>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p className="text-blue-600 font-medium text-sm mb-2">CEO & Founder</p>
<p className="text-gray-600 text-xs">Leading the vision and strategy for our company.</p>
</div>
</div>
<!-- Team Member 2 -->
<div className="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div className="h-32 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" className="w-full h-full object-cover" />
</div>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p className="text-green-600 font-medium text-sm mb-2">CTO</p>
<p className="text-gray-600 text-xs">Driving technical innovation and development.</p>
</div>
</div>
<!-- Team Member 3 -->
<div className="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div className="h-32 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" className="w-full h-full object-cover" />
</div>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p className="text-purple-600 font-medium text-sm mb-2">Lead Designer</p>
<p className="text-gray-600 text-xs">Creating beautiful user experiences and interfaces.</p>
</div>
</div>
<!-- Team Member 4 -->
<div className="bg-white rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-shadow">
<div className="h-32 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" className="w-full h-full object-cover" />
</div>
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p className="text-red-600 font-medium text-sm mb-2">Marketing Director</p>
<p className="text-gray-600 text-xs">Building brand awareness and customer engagement.</p>
</div>
</div>
</div>
);
}3. Circular Team Avatar Grid
Modern circular avatar grid with hover effects and team member details.
John Doe
CEO & Founder
Jane Smith
CTO
Mike Johnson
Lead Designer
Sarah Wilson
Marketing Director
Alex Chen
DevOps Engineer
<!-- Circular Team Avatar Grid -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 max-w-4xl mx-auto">
<!-- Team Member 1 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-purple-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-purple-600 font-medium text-sm">CEO & Founder</p>
</div>
<!-- Team Member 2 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-green-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p class="text-green-600 font-medium text-sm">CTO</p>
</div>
<!-- Team Member 3 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-blue-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p class="text-blue-600 font-medium text-sm">Lead Designer</p>
</div>
<!-- Team Member 4 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-red-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p class="text-red-600 font-medium text-sm">Marketing Director</p>
</div>
<!-- Team Member 5 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-yellow-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Alex Chen" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Alex Chen</h3>
<p class="text-yellow-600 font-medium text-sm">DevOps Engineer</p>
</div>
</div><template>
<!-- Circular Team Avatar Grid -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 max-w-4xl mx-auto">
<!-- Team Member 1 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-purple-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p class="text-purple-600 font-medium text-sm">CEO & Founder</p>
</div>
<!-- Team Member 2 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-green-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p class="text-green-600 font-medium text-sm">CTO</p>
</div>
<!-- Team Member 3 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-blue-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p class="text-blue-600 font-medium text-sm">Lead Designer</p>
</div>
<!-- Team Member 4 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-red-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p class="text-red-600 font-medium text-sm">Marketing Director</p>
</div>
<!-- Team Member 5 -->
<div class="flex flex-col items-center text-center group">
<div class="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-yellow-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Alex Chen" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-1">Alex Chen</h3>
<p class="text-yellow-600 font-medium text-sm">DevOps Engineer</p>
</div>
</div>
</template>export default function CircularTeamAvatarGrid() {
return (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 max-w-4xl mx-auto">
<!-- Team Member 1 -->
<div className="flex flex-col items-center text-center group">
<div className="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-purple-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-1">John Doe</h3>
<p className="text-purple-600 font-medium text-sm">CEO & Founder</p>
</div>
<!-- Team Member 2 -->
<div className="flex flex-col items-center text-center group">
<div className="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-green-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Jane Smith" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-1">Jane Smith</h3>
<p className="text-green-600 font-medium text-sm">CTO</p>
</div>
<!-- Team Member 3 -->
<div className="flex flex-col items-center text-center group">
<div className="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-blue-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Mike Johnson" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-1">Mike Johnson</h3>
<p className="text-blue-600 font-medium text-sm">Lead Designer</p>
</div>
<!-- Team Member 4 -->
<div className="flex flex-col items-center text-center group">
<div className="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-red-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sarah Wilson" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-1">Sarah Wilson</h3>
<p className="text-red-600 font-medium text-sm">Marketing Director</p>
</div>
<!-- Team Member 5 -->
<div className="flex flex-col items-center text-center group">
<div className="w-24 h-24 rounded-full overflow-hidden mb-4 ring-4 ring-transparent group-hover:ring-yellow-300 transition-all duration-300">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Alex Chen" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" />
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-1">Alex Chen</h3>
<p className="text-yellow-600 font-medium text-sm">DevOps Engineer</p>
</div>
</div>
);
}4. Team Member Card with Skills and Contact
Detailed team member card featuring skills, contact information, and professional details.
John Doe
Senior Developer
Experienced full-stack developer with 8+ years in web technologies and team leadership.
Skills
React
Node.js
Python
AWS
john@example.com
+1 (555) 123-4567
<!-- Team Member Card with Skills and Contact -->
<div class="max-w-md mx-auto">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="h-40 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-24 h-24 rounded-full border-4 border-white object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-1">John Doe</h3>
<p class="text-indigo-600 font-semibold mb-3">Senior Developer</p>
<p class="text-gray-600 text-sm mb-4">Experienced full-stack developer with 8+ years in web technologies and team leadership.</p>
<!-- Skills -->
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-900 mb-2">Skills</h4>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">React</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Node.js</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Python</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">AWS</span>
</div>
</div>
<!-- Contact -->
<div class="border-t pt-4">
<div class="flex items-center justify-between text-sm text-gray-600">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
john@example.com
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
+1 (555) 123-4567
</div>
</div>
</div>
</div>
</div>
</div><template>
<!-- Team Member Card with Skills and Contact -->
<div class="max-w-md mx-auto">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="h-40 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" class="w-24 h-24 rounded-full border-4 border-white object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-1">John Doe</h3>
<p class="text-indigo-600 font-semibold mb-3">Senior Developer</p>
<p class="text-gray-600 text-sm mb-4">Experienced full-stack developer with 8+ years in web technologies and team leadership.</p>
<!-- Skills -->
<div class="mb-4">
<h4 class="text-sm font-semibold text-gray-900 mb-2">Skills</h4>
<div class="flex flex-wrap gap-2">
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">React</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Node.js</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Python</span>
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">AWS</span>
</div>
</div>
<!-- Contact -->
<div class="border-t pt-4">
<div class="flex items-center justify-between text-sm text-gray-600">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
john@example.com
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
+1 (555) 123-4567
</div>
</div>
</div>
</div>
</div>
</div>
</template>export default function TeamMemberCardWithSkills() {
return (
<div className="max-w-md mx-auto">
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
<div className="h-40 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="John Doe" className="w-24 h-24 rounded-full border-4 border-white object-cover" />
</div>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-900 mb-1">John Doe</h3>
<p className="text-indigo-600 font-semibold mb-3">Senior Developer</p>
<p className="text-gray-600 text-sm mb-4">Experienced full-stack developer with 8+ years in web technologies and team leadership.</p>
<!-- Skills -->
<div className="mb-4">
<h4 className="text-sm font-semibold text-gray-900 mb-2">Skills</h4>
<div className="flex flex-wrap gap-2">
<span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">React</span>
<span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Node.js</span>
<span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">Python</span>
<span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">AWS</span>
</div>
</div>
<!-- Contact -->
<div className="border-t pt-4">
<div className="flex items-center justify-between text-sm text-gray-600">
<div className="flex items-center">
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
john@example.com
</div>
<div className="flex items-center">
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
+1 (555) 123-4567
</div>
</div>
</div>
</div>
</div>
</div>
);
}