<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<img class="hidden lg:block absolute inset-x-0 bottom-0 mb-96" src="zospace-assets/lines/line-two-montain.svg" alt="">
<div class="relative container px-4 mx-auto">
<div class="max-w-4xl mx-auto">
<h2 class="mb-24 text-center text-5xl font-bold font-heading text-white">Our Team</h2>
<div class="flex flex-wrap justify-center -mx-10 mb-20">
<div class="w-full lg:w-1/3 px-10 mb-20 lg:mb-0">
<div>
<img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=940&w=940" alt="">
<a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
<h3 class="mb-2 text-3xl text-white font-bold font-heading">Léa Herrera</h3>
<p class="mb-4 text-lg text-white font-bold">UX Designer</p>
<div class="flex justify-end">
<svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
</svg>
</div>
</a>
</div>
</div>
<div class="w-full lg:w-1/3 px-10 mb-20 lg:mb-0">
<div class="lg:mt-24">
<img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=940&w=940" alt="">
<a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
<h3 class="mb-2 text-3xl text-white font-bold font-heading">Maxi Svennson</h3>
<p class="mb-4 text-lg text-white font-bold">Social Media Manager</p>
<div class="flex justify-end">
<svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
</svg>
</div>
</a>
</div>
</div>
<div class="w-full lg:w-1/3 px-10">
<div>
<img class="mb-8 w-full h-112 lg:h-80 object-cover object-top" src="https://images.unsplash.com/photo-1615803795804-06a0c2a0030e?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=940&w=940" alt="">
<a class="inline-block w-full p-10 bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200" href="#">
<h3 class="mb-2 text-3xl text-white font-bold font-heading">Oliver Haller</h3>
<p class="mb-4 text-lg text-white font-bold">Co-Founder</p>
<div class="flex justify-end">
<svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="text-center"><a class="inline-block py-4 px-12 border border-gray-200 hover:border-gray-50 rounded-full font-bold text-white" href="#">More</a></div>
</div>
</div>
</section>Framework
Tailwind
UI Library
All Libraries
Components
- Alert 80
- Application 46
- Banner 10
- Blog 65
- Call to action 113
- Contact 48
- Content 48
- Cookies 46
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 52
- Features 108
- Footer 65
- Graphs 9
- HTTP codes 39
- Headers 88
- How it works 73
- Logo clouds 80
- Modals 2
- Navbar 28
- Navigation (horizontal) 113
- Navigation (vertical) 2
- Newsletter 52
- Portfolio 66
- Pricing 62
- Reviews 5
- Sign in / Sign up 73
- Stats 45
- Ta general tables 7
- Tables 25
- Team 52
- Testimonials 68
- Users 17
Show team members in an attractive and interesting way. Our UI libraries contain many variations of Tailwind teams components. Showing the entire team or its key figures builds credibility and attests to the professionalism of the company. It is easier to trust a specific person than a little-known and impersonal organization.
In this mode, you will see versions of the Tailwind teams components that are available within our UI libraries. You will also find many other types of components that will be in the same theme. Our UI libraries are prepared by experienced designers and the code underneath them is created by an in-house team of developers.
Get access to all Tailwind teams components, code and our editor. Try the demo for free.
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
