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 pb-10 lg:pt-[120px] lg:pb-20">
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[510px] text-center">
<span class="text-primary mb-2 block text-lg font-semibold">
Our Team
</span>
<h2
class="text-dark mb-4 text-3xl font-bold sm:text-4xl md:text-[40px]"
>
Our Awesome Team
</h2>
<p class="text-body-color text-base">
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="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4 md:w-1/2 xl:w-1/4">
<div class="mx-auto mb-10 w-full max-w-[370px]">
<div class="relative overflow-hidden rounded-lg">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-01.jpg"
alt="image"
class="w-full"
/>
<div class="absolute bottom-5 left-0 w-full text-center">
<div
class="relative mx-5 overflow-hidden rounded-lg bg-white py-5 px-3"
>
<h3 class="text-dark text-base font-semibold">Coriss Ambady</h3>
<p class="text-body-color text-sm">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 px-4 md:w-1/2 xl:w-1/4">
<div class="mx-auto mb-10 w-full max-w-[370px]">
<div class="relative overflow-hidden rounded-lg">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-02.jpg"
alt="image"
class="w-full"
/>
<div class="absolute bottom-5 left-0 w-full text-center">
<div
class="relative mx-5 overflow-hidden rounded-lg bg-white py-5 px-3"
>
<h3 class="text-dark text-base font-semibold">
Glorius Cristian
</h3>
<p class="text-body-color text-sm">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 px-4 md:w-1/2 xl:w-1/4">
<div class="mx-auto mb-10 w-full max-w-[370px]">
<div class="relative overflow-hidden rounded-lg">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-03.jpg"
alt="image"
class="w-full"
/>
<div class="absolute bottom-5 left-0 w-full text-center">
<div
class="relative mx-5 overflow-hidden rounded-lg bg-white py-5 px-3"
>
<h3 class="text-dark text-base font-semibold">
Jackie Sanders
</h3>
<p class="text-body-color text-sm">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 px-4 md:w-1/2 xl:w-1/4">
<div class="mx-auto mb-10 w-full max-w-[370px]">
<div class="relative overflow-hidden rounded-lg">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/team/team-01/image-04.jpg"
alt="image"
class="w-full"
/>
<div class="absolute bottom-5 left-0 w-full text-center">
<div
class="relative mx-5 overflow-hidden rounded-lg bg-white py-5 px-3"
>
<h3 class="text-dark text-base font-semibold">
Nikolas Brooten
</h3>
<p class="text-body-color text-sm">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 3
PRO
PRO
Team Style 3
Team Style 2
PRO
PRO
Team Style 2
Team Style 4
PRO
PRO
Team Style 4
Team Style 6
PRO
PRO
Team Style 6
Team Style 8
PRO
PRO
Team Style 8
Team Style 7
PRO
PRO
Team Style 7
Team Style 5
PRO
PRO
Team Style 5