Home
Rajesh Maheshwari
Team section

Team section

beautiful responsive our team section

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Team

Author Rajesh Maheshwari

Fork Fullscreen

<body class="bg-white">
  <section class="py-20 px-4">
    <div class="container mx-auto max-w-7xl">
      
      <div class="text-center max-w-3xl mx-auto mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Meet Our Talented Team</h2>
        <div class="h-1 w-20 bg-gradient-to-r from-indigo-600 to-purple-600 mx-auto mb-6 rounded-full"></div>
        <p class="text-gray-600 text-lg">We're a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.</p>
      </div>
      
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Alex Morgan</h3>
            <p class="text-indigo-600 font-medium">CEO & Founder</p>
            <p class="text-gray-600 mt-2">Visionary leader with 15+ years of experience in tech innovation.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Sarah Johnson</h3>
            <p class="text-indigo-600 font-medium">Chief Design Officer</p>
            <p class="text-gray-600 mt-2">Award-winning designer with a passion for creating beautiful, functional interfaces.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Michael Chen</h3>
            <p class="text-indigo-600 font-medium">CTO</p>
            <p class="text-gray-600 mt-2">Tech genius with expertise in AI and machine learning technologies.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Emily Rodriguez</h3>
            <p class="text-indigo-600 font-medium">Marketing Director</p>
            <p class="text-gray-600 mt-2">Creative strategist who excels at building and promoting brands.</p>
          </div>
        </div>
      </div>
      
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-12">
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">David Wilson</h3>
            <p class="text-indigo-600 font-medium">Lead Developer</p>
            <p class="text-gray-600 mt-2">Full-stack developer with a knack for solving complex problems.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Sophia Lee</h3>
            <p class="text-indigo-600 font-medium">UX Researcher</p>
            <p class="text-gray-600 mt-2">Human-centered designer focused on creating intuitive user experiences.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">James Taylor</h3>
            <p class="text-indigo-600 font-medium">Product Manager</p>
            <p class="text-gray-600 mt-2">Strategic thinker who bridges the gap between business and technology.</p>
          </div>
        </div>
        
        
        <div class="group">
          <div class="relative overflow-hidden rounded-xl mb-4">
            <img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Team member" class="w-full aspect-[3/4] object-cover object-center transform group-hover:scale-105 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
              <div class="flex space-x-4">
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fab fa-twitter"></i>
                </a>
                <a href="#" class="bg-white text-indigo-600 p-2 rounded-full hover:bg-indigo-600 hover:text-white transition-colors duration-200">
                  <i class="fas fa-envelope"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="text-center">
            <h3 class="text-xl font-bold text-gray-800">Olivia Martinez</h3>
            <p class="text-indigo-600 font-medium">Customer Success</p>
            <p class="text-gray-600 mt-2">Dedicated to ensuring our clients achieve their goals and succeed.</p>
          </div>
        </div>
      </div>
      
      
      <div class="mt-20 text-center">
        <div class="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 p-px rounded-lg">
          <a href="#" class="block bg-white hover:bg-gray-50 transition-colors duration-200 rounded-lg px-8 py-4 font-medium text-indigo-600">
            Join Our Team <span class="ml-2">→</span>
          </a>
        </div>
      </div>
    </div>
  </section>
</body>

Related Examples

Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

9 months ago

3.1k
Profile, Team or Testimonial
Profile, Team or Testimonial

Author:
Samuel Abera

9 months ago

2.9k
Cards - Users Card
Users card grid list

Author:
Casimiro Rocha

4 months ago

1.1k
Team Section

Author:
Samuel Abera

3 months ago

1.1k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

2 months ago

316
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

3 weeks ago

294
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

9.4k
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

1 week ago

39
cards
cards with background animation

Author:
Anonymous

1 year ago

10.2k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

10 months ago

2.4k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

3 months ago

566
User profile card

Author:
Mr Robot

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components