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

1.2k

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

1 year ago

4.3k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.7k
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.3k
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

1 year ago

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

Author:
Ameth Galarcio

11 months ago

1.8k
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

5 days ago

43
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

4 weeks ago

323
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

3 years ago

10k
Tailwind image card with text above it

Author:
I.P. Leroy

2 years ago

25.2k
profile card
card

Author:
Tofayel Islam

1 month ago

21
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

7 months ago

578
Product card

Author:
Anum Shahana

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components