Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Teams - All Examples
Discover 16 Teams examples available in Loopple
Team Section With Images
Component from
Motion Landing Library
Builder
<div class="w-full draggable">
<div class="container flex flex-col mx-auto my-20 gap-14">
<div class="w-full text-center md:text-start">
<h2 class="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900 font-display">Meet the Exceptional Team</h2>
<p class="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 class="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Olivia Baker</h3>
<p class="text-lg font-bold text-purple-blue-500">Director of Finance</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Andrew Foster</h3>
<p class="text-lg font-bold text-purple-blue-500">Senior Product Manager</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Jessica Lee</h3>
<p class="text-lg font-bold text-purple-blue-500">Customer Relations Manager</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Richard Ward</h3>
<p class="text-lg font-bold text-purple-blue-500">Creative Design Lead</p>
</div>
<div>
<p class="text-base font-medium leading-8 text-dark-grey-500">Richard is our creative genius, transforming ideas into captivating visuals.</p>
</div>
</div>
<div class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Michael Chang</h3>
<p class="text-lg font-bold text-purple-blue-500">Head of Operations</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Sarah Mitchell</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Marketing Officer (CMO)</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">David Rodriguez</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Technology Officer (CTO)</p>
</div>
<div>
<p class="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 class="flex flex-col items-start gap-4">
<div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg')"></div>
<div class="flex flex-col items-start">
<h3 class="text-xl font-extrabold leading-normal text-dark-grey-900 font-display">Emily Clarke</h3>
<p class="text-lg font-bold text-purple-blue-500">Chief Executive Officer (CEO)</p>
</div>
<div>
<p class="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>Teams 1
Component from
Soft UI Design System
Builder
<section class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<h4 class="text-gradient text-primary">Join our awesome team</h4>
</div>
</div>
<div class="row mt-lg-5 mt-4">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Michael Frisen</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">PHP Developer</span>
<br/>
<button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
<i class="fab fa-twitter text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-slack btn-simple px-2 mb-0">
<i class="fab fa-slack text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Laurent Shaun</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">Laravel Senior</span>
<br/>
<button type="button" class="btn btn-facebook btn-simple px-2 mb-0">
<i class="fab fa-facebook-f text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-slack btn-simple px-2 mb-0">
<i class="fab fa-slack text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-3.jpg">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Ramon Siente</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">Vue.js Specialist</span>
<br/>
<button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
<i class="fab fa-twitter text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-github btn-simple px-2 mb-0">
<i class="fab fa-github text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</section>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>
