Team Section Design
Explore creative team section design ideas to showcase your team’s profiles, skills, and achievements effectively on your website.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
We picked best that are suited just for you.
Manager
Web Developer
App Developer
Show Code
<div class="relative bg-[#171717] py-20">
<div class="relative z-[1] max-w-7xl">
<h2 class="mx-auto mb-12 max-w-md text-balance text-center text-2xl font-extrabold leading-tight text-white md:text-3xl">We picked best that are suited just for you.</h2>
<div class="flex flex-col items-center justify-center gap-8 2xl:flex-row">
<div class="text-right">
<div class="relative mb-4 flex gap-1 sm:gap-4">
<img src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="team section design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16 loading="lazy" /> <img
src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="team section design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16 loading="lazy" /> <img
src="https://designcools.com/wp-content/uploads/2024/11/2.jpg" alt="team section design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16 loading="lazy" />
<div class="absolute h-full w-full rounded-full bg-[#FB5D70]/30"></div>
</div>
<div class="inline-flex items-center gap-2 text-white sm:text-xl">
<span class="text-secondary">
<svg class="h-9 w-12" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M47.7976 29.0675C47.1079 29.2896 46.3829 29.3785 45.7109 29.6672C39.8561 32.3206 33.9303 31.888 28.0852 30.1486C26.0725 29.5505 24.0759 28.3413 22.485 26.9154C17.892 22.9102 14.4214 18.0306 12.2904 12.2892C11.673 10.6358 11.3706 8.82584 11.3342 6.94401C11.6997 7.38059 12.1073 7.84148 12.4484 8.32035C13.454 9.69036 14.4351 11.1027 15.5316 12.4124C15.999 12.9642 16.7148 13.3775 17.413 13.7241C17.6656 13.87 18.2643 13.7082 18.4529 13.4787C18.6415 13.2493 18.6575 12.6382 18.4714 12.4744C15.5272 9.30842 13.6322 5.39487 11.4399 1.70444C10.6693 0.413685 9.85585 0.16958 8.6913 1.01974C5.83426 3.14831 3.55325 5.83501 1.855 8.97094C1.80617 9.05553 1.90134 9.27965 2.00748 9.67926C5.02893 10.1831 5.83372 7.03886 8.30009 5.58697C8.30182 6.26464 8.26818 6.80911 8.32548 7.29331C9.8462 16.9116 14.8757 24.4394 22.3118 30.4243C23.4108 31.3407 24.8071 32.0341 26.1924 32.5519C31.288 34.4225 36.5376 34.8594 41.8283 33.5721C43.5335 33.1468 45.1393 32.2131 46.6963 31.3639C47.3261 31.0509 47.7412 30.3319 48.2094 29.8128C48.0721 29.5644 47.9348 29.3159 47.7976 29.0675Z"
fill="currentColor"
></path>
</svg>
</span>
Manager
</div>
</div>
<div class="text-right">
<div class="relative mb-4 flex gap-1 sm:gap-4">
<img src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="team ui design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="tailwind component design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/2.jpg" alt="portfolio design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="portfolio design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="developer 5" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" alt="marketing" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<div class="absolute h-full w-full rounded-full bg-[#00C9FF]/30"></div>
</div>
<div class="inline-flex items-center gap-2 text-white sm:text-xl">
<span class="text-secondary">
<svg class="h-9 w-12" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M47.7976 29.0675C47.1079 29.2896 46.3829 29.3785 45.7109 29.6672C39.8561 32.3206 33.9303 31.888 28.0852 30.1486C26.0725 29.5505 24.0759 28.3413 22.485 26.9154C17.892 22.9102 14.4214 18.0306 12.2904 12.2892C11.673 10.6358 11.3706 8.82584 11.3342 6.94401C11.6997 7.38059 12.1073 7.84148 12.4484 8.32035C13.454 9.69036 14.4351 11.1027 15.5316 12.4124C15.999 12.9642 16.7148 13.3775 17.413 13.7241C17.6656 13.87 18.2643 13.7082 18.4529 13.4787C18.6415 13.2493 18.6575 12.6382 18.4714 12.4744C15.5272 9.30842 13.6322 5.39487 11.4399 1.70444C10.6693 0.413685 9.85585 0.16958 8.6913 1.01974C5.83426 3.14831 3.55325 5.83501 1.855 8.97094C1.80617 9.05553 1.90134 9.27965 2.00748 9.67926C5.02893 10.1831 5.83372 7.03886 8.30009 5.58697C8.30182 6.26464 8.26818 6.80911 8.32548 7.29331C9.8462 16.9116 14.8757 24.4394 22.3118 30.4243C23.4108 31.3407 24.8071 32.0341 26.1924 32.5519C31.288 34.4225 36.5376 34.8594 41.8283 33.5721C43.5335 33.1468 45.1393 32.2131 46.6963 31.3639C47.3261 31.0509 47.7412 30.3319 48.2094 29.8128C48.0721 29.5644 47.9348 29.3159 47.7976 29.0675Z"
fill="currentColor"
></path>
</svg>
</span>
Web Developer
</div>
</div>
<div class="text-right">
<div class="relative mb-4 flex gap-1 sm:gap-4">
<img src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="tailwind component design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="tailwind team ui design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" alt="team design" class="h-12 w-12 rounded-full bg-white object-cover sm:h-16 sm:w-16" loading="lazy" />
<img src="https://designcools.com/wp-content/uploads/2024/11/2.jpg" alt="tailwind team section design" class="h-12 w-12 rounded-full object-cover sm:h-16 sm:w-16" loading="lazy" />
<div class="absolute h-full w-full rounded-full bg-[#BB4AF3]/30"></div>
</div>
<div class="inline-flex items-center gap-2 text-white sm:text-xl">
<span class="text-secondary">
<svg class="h-9 w-12" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M47.7976 29.0675C47.1079 29.2896 46.3829 29.3785 45.7109 29.6672C39.8561 32.3206 33.9303 31.888 28.0852 30.1486C26.0725 29.5505 24.0759 28.3413 22.485 26.9154C17.892 22.9102 14.4214 18.0306 12.2904 12.2892C11.673 10.6358 11.3706 8.82584 11.3342 6.94401C11.6997 7.38059 12.1073 7.84148 12.4484 8.32035C13.454 9.69036 14.4351 11.1027 15.5316 12.4124C15.999 12.9642 16.7148 13.3775 17.413 13.7241C17.6656 13.87 18.2643 13.7082 18.4529 13.4787C18.6415 13.2493 18.6575 12.6382 18.4714 12.4744C15.5272 9.30842 13.6322 5.39487 11.4399 1.70444C10.6693 0.413685 9.85585 0.16958 8.6913 1.01974C5.83426 3.14831 3.55325 5.83501 1.855 8.97094C1.80617 9.05553 1.90134 9.27965 2.00748 9.67926C5.02893 10.1831 5.83372 7.03886 8.30009 5.58697C8.30182 6.26464 8.26818 6.80911 8.32548 7.29331C9.8462 16.9116 14.8757 24.4394 22.3118 30.4243C23.4108 31.3407 24.8071 32.0341 26.1924 32.5519C31.288 34.4225 36.5376 34.8594 41.8283 33.5721C43.5335 33.1468 45.1393 32.2131 46.6963 31.3639C47.3261 31.0509 47.7412 30.3319 48.2094 29.8128C48.0721 29.5644 47.9348 29.3159 47.7976 29.0675Z"
fill="currentColor"
></path>
</svg>
</span>
App Developer
</div>
</div>
</div>
</div>
</div>Preview
Dream Team
Meet our talented professionals team.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, earum debitis officia suscipit eum dolore dignissimos.
Peter Parker
Product Manager
Mark Jons
Digital Marketing Head
Lake Justin
Designer
Tonny Mark
BDR
Martin Roy
Research & Analyst
Zezz Larkin
Security handler
Sophie Swift
Designer UI/UX
Benedict Caro
Frontend Developer
Adam Molly
Full Stack Developer
Show Code
<div class="px-4 py-16 max-w-7xl mx-auto lg:px-0">
<div class="flex justify-center">
<p class="inline-block px-3 py-1 mb-4 text-xs font-bold tracking-wider text-center uppercase rounded-full bg-emerald-500">
Dream Team
</p>
</div>
<h2 class="mb-6 text-center text-balance font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl">
Meet our talented professionals team.
</h2>
<p class="text-base max-w-lg mx-auto text-center text-gray-700 md:text-lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, earum debitis officia suscipit eum dolore dignissimos.
</p>
<div class="grid gap-10 mt-16 mx-auto sm:row-gap-10 lg:max-w-screen-lg sm:grid-cols-2 lg:grid-cols-3">
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="team section design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Oliver Aguilerra</p>
<p class="text-sm text-gray-800">Product Manager</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="team section design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Marta Clermont</p>
<p class="text-sm text-gray-800">Design Team Lead</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/lady2.jpeg" alt="team portfolio design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Anthony Geek</p>
<p class="text-sm text-gray-800">CTO, Lorem Inc.</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="team component design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Alice Melbourne</p>
<p class="text-sm text-gray-800">Human Resources</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="team section design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Martin Garix</p>
<p class="text-sm text-gray-800">Bad boy</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/man.jpeg" alt="team section" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Andrew Larkin</p>
<p class="text-sm text-gray-800">Backend Developer</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/2.jpg" alt="team listing page" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Sophie Denmo</p>
<p class="text-sm text-gray-800">Designer UI/UX</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/11/lady.jpeg" alt="team listing" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Benedict Caro</p>
<p class="text-sm text-gray-800">Frontend Developer</p>
</div>
</div>
<div class="flex items-center">
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="team page design" />
<div class="flex flex-col justify-center">
<p class="text-lg font-bold">Adam Molly</p>
<p class="text-sm text-gray-800">Full Stack Developer</p>
</div>
</div>
</div>
</div>Modern 900+ Design Components
Stay in the loop with everything you need to know.