Motion Landing Library React Components
Discover 4 components available in Motion Landing Library React
Team Section With Images
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col mx-auto my-20 gap-14">
<div data-type='div' className="w-full text-center md:text-start">
<h2 data-type='h2' className="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900">
Meet the Exceptional Team
</h2>
<p data-type='p' className="text-lg font-normal md:w-7/12 text-dark-grey-500">
Our dedicated professionals bring unparalleled expertise and commitment
to every endeavor. We believe in the art of innovation, and our passion
propels us forward. Experience the excellence that sets us apart.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Olivia Baker
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Director of Finance
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Olivia is our financial wizard, meticulously managing our finances,
investments, and budgets.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Andrew Foster
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Senior Product Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Andrew oversees our product development, turning ideas into
market-ready solutions.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Jessica Lee
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Customer Relations Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Jessica is our customer champion, ensuring every client interaction
is a positive one.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Richard Ward
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Creative Design Lead
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Richard is our creative genius, transforming ideas into captivating
visuals.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Michael Chang
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Head of Operations
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Michael is the mastermind behind our efficient operations. He
ensures our processes run like a well-oiled machine.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Sarah Mitchell
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Marketing Officer (CMO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Sarah is the creative force behind our brand. Her marketing prowess
and strategic thinking drive business growth.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
David Rodriguez
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Technology Officer (CTO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
David is our tech guru, spearheading innovation and ensuring our
products are cutting-edge.{""}
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Emily Clarke
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Executive Officer (CEO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Emily leads our company with a visionary zeal, setting the strategic
direction and inspiring our team to achieve greatness.
</p>
</div>
</div>
</div>
</div>
</div>
