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 $@(\/)(\/)¥

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

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

Author:
Mike Varen

1 year ago

4k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

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

9 months ago

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

Author:
Ameth Galarcio

7 months ago

1.5k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

7 months ago

1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

4 months ago

702
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

1.9k
Article-Post Preview card

Author:
Prashant

3 years ago

9.5k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

Author:
dev-fab250

4 months ago

1.2k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.6k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

2 years ago

14.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components