<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 CSS
UI Library
All Libraries
Components
- Alert 80
- Application 80
- Banner 20
- Blog 100
- Call to action 152
- Careers 20
- Contact 76
- Content 65
- Cookies 79
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 66
- Features 170
- Footers 100
- Graphs 19
- HTTP codes 77
- Headers 122
- How it works 99
- Logo clouds 120
- Modals 8
- Navbar 44
- Navigation (horizontal) 146
- Navigation (vertical) 2
- Newsletter 87
- Portfolio 77
- Pricing 94
- Reviews 10
- Rich text 3
- Sign in / Sign up 120
- Stats 115
- Tables 56
- Team 85
- Testimonials 107
- Users 17
Component #1
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 #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
