Team Section

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

Card Team Social media buttons

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

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

Tailwind v3.4 2.9k 9

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

Computer guy

2 years ago

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

Mike Varen

2 years ago

5.2k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

2 years ago

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

Abhiraj

1 year ago

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

Ameth Galarcio

1 year ago

2.3k
Team section
beautiful responsive our team section

Rajesh Maheshwari

1 year ago

2k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.6k
Tailwind flex Hero
Show Image with flex image gallery

Riaz Uddin Masum

8 months ago

1.1k
card
card simple hover

Raul antonio de la cruz hernandez

7 months ago

669
cards ecommerce
this cards have the best animation

ishimwe shadad

1 year ago

1.9k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

2 months ago

235