team #01
1
Color options
Customize your colors.
<section>
<div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div class="max-w-xl mx-auto text-center lg:text-balance">
<p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
<h2
class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Introducing our team
</h2>
<p class="text-base mt-4 font-medium text-base-500">
Uniting talent with vision. Get to know the dedicated professionals who
blend their skills and passion to lead us to new heights.
</p>
</div>
<ul
role="list"
class="mt-12 text-center grid sm:grid-cols-2 md:grid-cols-3 lg:divide-x divide-base-200 lg:grid-cols-4 lg:border-x lg:mt-24"
>
<li class="p-8">
<div class="flex flex-col gap-4">
<img
class="object-cover mx-auto rounded-full size-16 lg:size-20"
src="/avatars/1.jpg"
alt="#_"
/>
<div>
<h3 class="text-lg md:text-xl font-medium text-base-900">
Fernando Monte
</h3>
<p class="text-base font-medium text-base-500">
Creator of Oxbow UI.com
</p>
</div>
</div>
</li>
<li class="p-8">
<div class="flex flex-col gap-4">
<img
class="object-cover mx-auto rounded-full size-16 lg:size-20"
src="/avatars/2.jpg"
alt="#_"
/>
<div>
<h3 class="text-lg md:text-xl font-medium text-base-900">
Juan Echanove
</h3>
<p class="text-base font-medium text-base-500">
Founder of Pay Oneeer
</p>
</div>
</div>
</li>
<li class="p-8">
<div class="flex flex-col gap-4">
<img
class="object-cover mx-auto rounded-full size-16 lg:size-20"
src="/avatars/3.jpg"
alt="#_"
/>
<div>
<h3 class="text-lg md:text-xl font-medium text-base-900">
Hanako Yamada
</h3>
<p class="text-base font-medium text-base-500">Founder of Fesla</p>
</div>
</div>
</li>
<li class="p-8">
<div class="flex flex-col gap-4">
<img
class="object-cover mx-auto rounded-full size-16 lg:size-20"
src="/avatars/4.jpg"
alt="#_"
/>
<div>
<h3 class="text-lg md:text-xl font-medium text-base-900">
Heidi Herrera
</h3>
<p class="text-base font-medium text-base-500">COO at Pff Inc</p>
</div>
</div>
</li>
</ul>
<div class="flex items-center justify-center mt-8 text-center gap-2">
<p class="text-base font-medium text-base-500">We are hiring</p>
<a
class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-base-900"
href="#_"
>
See all our open roles
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-chevron-right size-4"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</div>
</div>
</section>