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.2k
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

11 months ago

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

Author:
Ameth Galarcio

10 months ago

1.7k
Responsive Article Section

Author:
Prashant

3 years ago

16.4k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.3k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

2.9k
beautifull project Item

Author:
Akram Khan

1 year ago

2.8k
Simple Review Card

Author:
Ranit Saha

9 months ago

869
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.7k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

1 month ago

40

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components