Tailwind CSS Teams Components
Team UI components crafted for Tailwind CSS, having a team section or page must for a site to show who are behind the product and showcase strength. Team Tailwind components offer templates with an option to put a picture of the team members along with their names and little descriptions. For a company website, it can be an important page because it helps the users to connect with the company. Tailwind CSS UI components offer various built-in support for frameworks such as Angular, Vue, and React. There is a lot of scope for customization because it allows users to change the gradient colors or background images. TailGrids has created several templates for the Team page based on Tailwind CSS. You can choose from the eight beautiful templates that are offered by them. Try out the free one to play around with the design, and if you love it, you always have an option to go pro!
Team Style 1
FREE
FREE
Team Style 1<!-- ====== Team Section Start -->
<section class="pt-20 lg:pt-[120px] pb-10 lg:pb-20">
<div class="container">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="text-center mx-auto mb-[60px] max-w-[510px]">
<span class="font-semibold text-lg text-primary mb-2 block">
Our Team
</span>
<h2
class="
font-bold
text-3xl
sm:text-4xl
md:text-[40px]
text-dark
mb-4
"
>
Our Awesome Team
</h2>
<p class="text-base text-body-color">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap justify-center -mx-4">
<div class="w-full md:w-1/2 xl:w-1/4 px-4">
<div class="max-w-[370px] w-full mx-auto mb-10">
<div class="relative rounded-lg overflow-hidden">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-01.jpg"
alt="image"
class="w-full"
/>
<div class="absolute w-full bottom-5 left-0 text-center">
<div
class="
bg-white
relative
rounded-lg
overflow-hidden
mx-5
py-5
px-3
"
>
<h3 class="text-base font-semibold text-dark">
Coriss Ambady
</h3>
<p class="text-sm text-body-color">Web Developer</p>
<div>
<span class="absolute left-0 bottom-0">
<svg
width="61"
height="30"
viewBox="0 0 61 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="16"
cy="45"
r="45"
fill="#13C296"
fill-opacity="0.11"
/>
</svg>
</span>
<span class="absolute top-0 right-0">
<svg
width="20"
height="25"
viewBox="0 0 20 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="0.706257"
cy="24.3533"
r="0.646687"
transform="rotate(-90 0.706257 24.3533)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="24.3533"
r="0.646687"
transform="rotate(-90 6.39669 24.3533)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="24.3533"
r="0.646687"
transform="rotate(-90 12.0881 24.3533)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="24.3533"
r="0.646687"
transform="rotate(-90 17.7785 24.3533)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="18.6624"
r="0.646687"
transform="rotate(-90 0.706257 18.6624)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="18.6624"
r="0.646687"
transform="rotate(-90 6.39669 18.6624)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="18.6624"
r="0.646687"
transform="rotate(-90 12.0881 18.6624)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="18.6624"
r="0.646687"
transform="rotate(-90 17.7785 18.6624)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="12.9717"
r="0.646687"
transform="rotate(-90 0.706257 12.9717)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="12.9717"
r="0.646687"
transform="rotate(-90 6.39669 12.9717)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="12.9717"
r="0.646687"
transform="rotate(-90 12.0881 12.9717)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="12.9717"
r="0.646687"
transform="rotate(-90 17.7785 12.9717)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="7.28077"
r="0.646687"
transform="rotate(-90 0.706257 7.28077)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="7.28077"
r="0.646687"
transform="rotate(-90 6.39669 7.28077)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="7.28077"
r="0.646687"
transform="rotate(-90 12.0881 7.28077)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="7.28077"
r="0.646687"
transform="rotate(-90 17.7785 7.28077)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="1.58989"
r="0.646687"
transform="rotate(-90 0.706257 1.58989)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="1.58989"
r="0.646687"
transform="rotate(-90 6.39669 1.58989)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="1.58989"
r="0.646687"
transform="rotate(-90 12.0881 1.58989)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="1.58989"
r="0.646687"
transform="rotate(-90 17.7785 1.58989)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 px-4">
<div class="max-w-[370px] w-full mx-auto mb-10">
<div class="relative rounded-lg overflow-hidden">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-02.jpg"
alt="image"
class="w-full"
/>
<div class="absolute w-full bottom-5 left-0 text-center">
<div
class="
bg-white
relative
rounded-lg
overflow-hidden
mx-5
py-5
px-3
"
>
<h3 class="text-base font-semibold text-dark">
Glorius Cristian
</h3>
<p class="text-sm text-body-color">App Developer</p>
<div>
<span class="absolute left-0 bottom-0">
<svg
width="61"
height="30"
viewBox="0 0 61 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="16"
cy="45"
r="45"
fill="#13C296"
fill-opacity="0.11"
/>
</svg>
</span>
<span class="absolute top-0 right-0">
<svg
width="20"
height="25"
viewBox="0 0 20 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="0.706257"
cy="24.3533"
r="0.646687"
transform="rotate(-90 0.706257 24.3533)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="24.3533"
r="0.646687"
transform="rotate(-90 6.39669 24.3533)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="24.3533"
r="0.646687"
transform="rotate(-90 12.0881 24.3533)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="24.3533"
r="0.646687"
transform="rotate(-90 17.7785 24.3533)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="18.6624"
r="0.646687"
transform="rotate(-90 0.706257 18.6624)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="18.6624"
r="0.646687"
transform="rotate(-90 6.39669 18.6624)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="18.6624"
r="0.646687"
transform="rotate(-90 12.0881 18.6624)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="18.6624"
r="0.646687"
transform="rotate(-90 17.7785 18.6624)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="12.9717"
r="0.646687"
transform="rotate(-90 0.706257 12.9717)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="12.9717"
r="0.646687"
transform="rotate(-90 6.39669 12.9717)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="12.9717"
r="0.646687"
transform="rotate(-90 12.0881 12.9717)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="12.9717"
r="0.646687"
transform="rotate(-90 17.7785 12.9717)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="7.28077"
r="0.646687"
transform="rotate(-90 0.706257 7.28077)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="7.28077"
r="0.646687"
transform="rotate(-90 6.39669 7.28077)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="7.28077"
r="0.646687"
transform="rotate(-90 12.0881 7.28077)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="7.28077"
r="0.646687"
transform="rotate(-90 17.7785 7.28077)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="1.58989"
r="0.646687"
transform="rotate(-90 0.706257 1.58989)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="1.58989"
r="0.646687"
transform="rotate(-90 6.39669 1.58989)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="1.58989"
r="0.646687"
transform="rotate(-90 12.0881 1.58989)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="1.58989"
r="0.646687"
transform="rotate(-90 17.7785 1.58989)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 px-4">
<div class="max-w-[370px] w-full mx-auto mb-10">
<div class="relative rounded-lg overflow-hidden">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-03.jpg"
alt="image"
class="w-full"
/>
<div class="absolute w-full bottom-5 left-0 text-center">
<div
class="
bg-white
relative
rounded-lg
overflow-hidden
mx-5
py-5
px-3
"
>
<h3 class="text-base font-semibold text-dark">
Jackie Sanders
</h3>
<p class="text-sm text-body-color">UI/UX Designer</p>
<div>
<span class="absolute left-0 bottom-0">
<svg
width="61"
height="30"
viewBox="0 0 61 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="16"
cy="45"
r="45"
fill="#13C296"
fill-opacity="0.11"
/>
</svg>
</span>
<span class="absolute top-0 right-0">
<svg
width="20"
height="25"
viewBox="0 0 20 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="0.706257"
cy="24.3533"
r="0.646687"
transform="rotate(-90 0.706257 24.3533)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="24.3533"
r="0.646687"
transform="rotate(-90 6.39669 24.3533)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="24.3533"
r="0.646687"
transform="rotate(-90 12.0881 24.3533)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="24.3533"
r="0.646687"
transform="rotate(-90 17.7785 24.3533)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="18.6624"
r="0.646687"
transform="rotate(-90 0.706257 18.6624)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="18.6624"
r="0.646687"
transform="rotate(-90 6.39669 18.6624)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="18.6624"
r="0.646687"
transform="rotate(-90 12.0881 18.6624)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="18.6624"
r="0.646687"
transform="rotate(-90 17.7785 18.6624)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="12.9717"
r="0.646687"
transform="rotate(-90 0.706257 12.9717)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="12.9717"
r="0.646687"
transform="rotate(-90 6.39669 12.9717)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="12.9717"
r="0.646687"
transform="rotate(-90 12.0881 12.9717)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="12.9717"
r="0.646687"
transform="rotate(-90 17.7785 12.9717)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="7.28077"
r="0.646687"
transform="rotate(-90 0.706257 7.28077)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="7.28077"
r="0.646687"
transform="rotate(-90 6.39669 7.28077)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="7.28077"
r="0.646687"
transform="rotate(-90 12.0881 7.28077)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="7.28077"
r="0.646687"
transform="rotate(-90 17.7785 7.28077)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="1.58989"
r="0.646687"
transform="rotate(-90 0.706257 1.58989)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="1.58989"
r="0.646687"
transform="rotate(-90 6.39669 1.58989)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="1.58989"
r="0.646687"
transform="rotate(-90 12.0881 1.58989)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="1.58989"
r="0.646687"
transform="rotate(-90 17.7785 1.58989)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 xl:w-1/4 px-4">
<div class="max-w-[370px] w-full mx-auto mb-10">
<div class="relative rounded-lg overflow-hidden">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-04.jpg"
alt="image"
class="w-full"
/>
<div class="absolute w-full bottom-5 left-0 text-center">
<div
class="
bg-white
relative
rounded-lg
overflow-hidden
mx-5
py-5
px-3
"
>
<h3 class="text-base font-semibold text-dark">
Nikolas Brooten
</h3>
<p class="text-sm text-body-color">Sales Manager</p>
<div>
<span class="absolute left-0 bottom-0">
<svg
width="61"
height="30"
viewBox="0 0 61 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="16"
cy="45"
r="45"
fill="#13C296"
fill-opacity="0.11"
/>
</svg>
</span>
<span class="absolute top-0 right-0">
<svg
width="20"
height="25"
viewBox="0 0 20 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="0.706257"
cy="24.3533"
r="0.646687"
transform="rotate(-90 0.706257 24.3533)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="24.3533"
r="0.646687"
transform="rotate(-90 6.39669 24.3533)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="24.3533"
r="0.646687"
transform="rotate(-90 12.0881 24.3533)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="24.3533"
r="0.646687"
transform="rotate(-90 17.7785 24.3533)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="18.6624"
r="0.646687"
transform="rotate(-90 0.706257 18.6624)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="18.6624"
r="0.646687"
transform="rotate(-90 6.39669 18.6624)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="18.6624"
r="0.646687"
transform="rotate(-90 12.0881 18.6624)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="18.6624"
r="0.646687"
transform="rotate(-90 17.7785 18.6624)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="12.9717"
r="0.646687"
transform="rotate(-90 0.706257 12.9717)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="12.9717"
r="0.646687"
transform="rotate(-90 6.39669 12.9717)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="12.9717"
r="0.646687"
transform="rotate(-90 12.0881 12.9717)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="12.9717"
r="0.646687"
transform="rotate(-90 17.7785 12.9717)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="7.28077"
r="0.646687"
transform="rotate(-90 0.706257 7.28077)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="7.28077"
r="0.646687"
transform="rotate(-90 6.39669 7.28077)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="7.28077"
r="0.646687"
transform="rotate(-90 12.0881 7.28077)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="7.28077"
r="0.646687"
transform="rotate(-90 17.7785 7.28077)"
fill="#3056D3"
/>
<circle
cx="0.706257"
cy="1.58989"
r="0.646687"
transform="rotate(-90 0.706257 1.58989)"
fill="#3056D3"
/>
<circle
cx="6.39669"
cy="1.58989"
r="0.646687"
transform="rotate(-90 6.39669 1.58989)"
fill="#3056D3"
/>
<circle
cx="12.0881"
cy="1.58989"
r="0.646687"
transform="rotate(-90 12.0881 1.58989)"
fill="#3056D3"
/>
<circle
cx="17.7785"
cy="1.58989"
r="0.646687"
transform="rotate(-90 17.7785 1.58989)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Team Section End -->
Team Style 2
PRO
PRO
Team Style 2
Team Style 3
PRO
PRO
Team Style 3
Team Style 4
PRO
PRO
Team Style 4
Team Style 5
PRO
PRO
Team Style 5
Team Style 6
PRO
PRO
Team Style 6
Team Style 7
PRO
PRO
Team Style 7
Team Style 8
PRO
PRO
Team Style 8