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

Team Section

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

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

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

1 year ago

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

Author:
Mike Varen

1 year ago

3.8k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

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

Author:
Casimiro Rocha

9 months ago

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

7 months ago

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

Author:
Ameth Galarcio

6 months ago

1.3k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

5 months ago

722
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

2 months ago

458
Website Pricing List Card Component
A Website Pricing List Card Component is a reusable UI element that displays pricing plans or packages on a website, typically for SaaS products, subscriptions, or service tiers. It helps users easily compare different pricing options and choose the best one.

Author:
dev-fab250

2 months ago

819
Simple Card section

Author:
Akram Khan

1 year ago

2k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.7k
Contact us Form with Responsive

Author:
KULDEEP

1 month ago

140

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components