Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Teams - All Examples
Discover 9 Teams examples available in Loopple
Teams 2
Teams 3
Teams 4
Teams 5
Team Section With Images And Social Links
Team Section With Profile Cards
Teams 1
<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><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
<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">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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Olivia Baker</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Andrew Foster</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Jessica Lee</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Richard Ward</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Michael Chang</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Sarah Mitchell</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">David Rodriguez</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Emily Clarke</p>
<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><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">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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Olivia Baker</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Andrew Foster</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Jessica Lee</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Richard Ward</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Michael Chang</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Sarah Mitchell</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">David Rodriguez</p>
<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">
<p class="text-xl font-extrabold leading-normal text-dark-grey-900">Emily Clarke</p>
<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>