Component:
Team E-commerce Modern
Colors:
Description:
This carefully crafted Team component is perfect for E-commerce landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@type: Team
@industry: E-commerce
@style: Modern
@category: Support, Content
@framework: Tailwind
@license: Free
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto space-y-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">Meet Our Passionate Team</h2>
<p class="text-lg text-gray-600 md:text-xl">Behind every curated collection and seamless experience is a dedicated team committed to bringing you the best in fashion and service.</p>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="Jane Doe - CEO & Founder" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">Jane Doe</h3>
<p class="text-orange-500 font-medium mb-3">CEO & Founder</p>
<p class="text-gray-600 text-sm mb-4">With over 15 years in fashion retail, Jane leads StyleHub's vision for accessible, high-quality style.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of Jane Doe">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of Jane Doe">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="John Smith - Head of Product" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">John Smith</h3>
<p class="text-orange-500 font-medium mb-3">Head of Product</p>
<p class="text-gray-600 text-sm mb-4">John's expertise in product development ensures every item meets our rigorous standards for design and durability.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of John Smith">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of John Smith">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="Emily White - Chief Marketing Officer" loading="lazy" width="160" height="160" decoding="async"
data-nimg="1" class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">Emily White</h3>
<p class="text-orange-500 font-medium mb-3">Chief Marketing Officer</p>
<p class="text-gray-600 text-sm mb-4">Emily crafts compelling campaigns that connect our brand with customers,
sharing the StyleHub story globally.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of Emily White">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of Emily White">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
<div
class="group bg-gray-50 p-6 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]">
<img alt="David Lee - Lead Designer" loading="lazy" width="160" height="160" decoding="async" data-nimg="1"
class="rounded-full object-cover mb-4 border-4 border-orange-100 group-hover:border-orange-400 transition-all duration-300"
src="https://landinggo.com/assets/img/stock/team/team-40x40-4.webp">
<h3 class="text-2xl font-semibold text-gray-900 mb-1">David Lee</h3>
<p class="text-orange-500 font-medium mb-3">Lead Designer</p>
<p class="text-gray-600 text-sm mb-4">David's innovative designs set trends and bring fresh perspectives to our
collections, inspiring our customers.</p>
<div class="flex gap-3">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn of David Lee">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-linkedin h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Twitter of David Lee">
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-twitter h-6 w-6 text-gray-500 hover:text-orange-500 transition-colors">
<path
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="mt-12">
<button data-slot="button"
class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
Join Our Growing Team
</button>
</div>
</div>
</section> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page