Home
$@(\/)(\/)¥
Team Section

Team Section

This tailwind example is contributed by $@(\/)(\/)¥, on 13-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Card Team Social media buttons

$$@(\/)(\/)¥ profile image$

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

2.1k

Fork Fullscreen

<div class="w-full h-full pt-10 pb-32">
  <div class="w-full h-full flex flex-col gap-4 items-center justify-center px-2">
    <h1 class="md:text-6xl text-4xl font-display text-gray-900">Our Teams</h1>
    <p class="text-lg text-center px-4 text-gray-500">Diverse team of experts dedicated to innovation, collaboration, and excellence in delivering exceptional results for our clients.</p>

<div class="lg:w-full md:w-[96%] w-full mx-auto grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 px-4 pt-6">
      
      <div class="h-fit relative">
        
        <img class="xs:h-[50rem] w-[26rem] object-cover xs:rounded-[50%] rounded-xl" 
        src="https://images.unsplash.com/photo-1631306006348-f9ed42b1e19a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHxQcm9mZXNzaW9uYWxzJTIwdGVhY2hlcnxlbnwwfDF8fHwxNzMxNTAxNjE2fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Team-1" />
        
        <div
          class="absolute xs:bottom-[5rem] bottom-0 left-0 right-0 mx-auto xxl:left-[17rem] xl:left-[.2rem] lg:left-[15rem] md:-left-4 xs:left-[17rem] xs:w-[18rem] xs:h-[18rem] bg-gray-100 xs:rounded-full rounded-lg outline xs:outline-[20px] outline-[10px] outline-orange-50 hover:outline-lightOrange flex flex-col items-center justify-center">
          <h2 class="text-4xl font-semibold font-display text-bsDark">Full Name</h2>
          <h4 class="text-lg text-gray-600 my-2">Designation</h4>
          
          <div class="flex gap-2 justify-center items-center text-2xl text-white">
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-facebook"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-instagram"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="person-circle-outline"></ion-icon>
            </div>
          </div>
        </div>
      </div>

<div class="h-fit relative">
        
        <img class="xs:h-[50rem] w-[26rem] object-cover xs:rounded-[50%] rounded-xl" 
        src="https://images.unsplash.com/photo-1700156246325-65bbb9e1dc0d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8UHJvZmVzc2lvbmFscyUyMHRlYWNoZXJ8ZW58MHwxfHx8MTczMTUwMTYxNnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Team-1" />
        
        <div
          class="absolute xs:bottom-[5rem] bottom-0 left-0 right-0 mx-auto xxl:left-[17rem] xl:left-[.2rem] lg:left-[15rem] md:-left-4 xs:left-[17rem] xs:w-[18rem] xs:h-[18rem] bg-gray-100 xs:rounded-full rounded-lg outline xs:outline-[20px] outline-[10px] outline-orange-50 hover:outline-lightOrange flex flex-col items-center justify-center">
          <h2 class="text-4xl font-semibold font-display text-bsDark">Full Name</h2>
          <h4 class="text-lg text-gray-600 my-2">Designation</h4>
          
          <div class="flex gap-2 justify-center items-center text-2xl text-white">
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-facebook"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-instagram"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="person-circle-outline"></ion-icon>
            </div>
          </div>
        </div>
      </div>

<div class="h-fit relative">
        
        <img class="xs:h-[50rem] w-[26rem] object-cover xs:rounded-[50%] rounded-xl" 
        src="https://images.unsplash.com/photo-1633353240079-d5197fdff535?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw5fHxibGFjayUyMHN1aXR8ZW58MHwxfHx8MTczMTUwMTc0OXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Team-1" />
        
        <div
          class="absolute xs:bottom-[5rem] bottom-0 left-0 right-0 mx-auto xxl:left-[17rem] xl:left-[.2rem] lg:left-[15rem] md:-left-4 xs:left-[17rem] xs:w-[18rem] xs:h-[18rem] bg-gray-100 xs:rounded-full rounded-lg outline xs:outline-[20px] outline-[10px] outline-orange-50 hover:outline-lightOrange flex flex-col items-center justify-center">
          <h2 class="text-4xl font-semibold font-display text-bsDark">Full Name</h2>
          <h4 class="text-lg text-gray-600 my-2">Designation</h4>
          
          <div class="flex gap-2 justify-center items-center text-2xl text-white">
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-facebook"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-instagram"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="logo-whatsapp"></ion-icon>
            </div>
            <div class="flex items-center justify-center p-2 bg-lightOrange rounded-full">
              <ion-icon name="person-circle-outline"></ion-icon>
            </div>
          </div>
        </div>
      </div>

</div>
  </div>
</div>

Related Examples

Card with social media share buttons

Author:
Computer guy

2 years ago

9.1k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.1k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.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

10 months ago

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

Author:
Ameth Galarcio

9 months ago

1.6k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

8 months ago

1.1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

5 months ago

984
modern portifolio
by salvator

Author:
Baraka Salvator

5 months ago

604
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

8 months ago

764
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
Team section - Htmlwind
Team section with round images

Author:
Htmlwind

5 months ago

163
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components