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

1.8k

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.5k
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

8 months ago

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

6 months ago

862
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
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

4 months ago

369
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 month ago

304
E-commerce cards
E-commerce responsive cards with dark mode

Author:
Robert Chunga

1 year ago

2k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

1 month ago

258
Profile card

Author:
Jaber Zarif

1 year ago

1.9k
Landing page

Author:
Maxim

3 months ago

863

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components