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

347

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

3.7k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.4k
Cards - Users Card DaddyBrasil
Users card grid list - daddybrasil.com.br

Author:
Casimiro Rocha

7 months ago

1.8k
Team Section

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

7 months ago

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

5 months ago

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

Author:
Ameth Galarcio

4 months ago

1.1k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

10 months ago

1.6k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

2 months ago

180
Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.3k
Blog Card
A blog card with dark-mode

Author:
Robert Chunga

6 months ago

1.1k
Floating capsule

Author:
Amazing Engineer

1 month ago

220
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

15.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components