Component:
Integration E-commerce Modern
Colors:
Description:
This carefully crafted Integration 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: Integration
@industry: E-commerce
@style: Modern
@category: Page Section, Content, Support
@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">Connect Your Favorite Tools
</h2>
<p class="text-lg text-gray-600 md:text-xl">
StyleHub integrates seamlessly with the platforms you already use, streamlining your operations and enhancing your e-commerce experience.
</p>
</div>
<div class="mt-12 flex grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-credit-card h-10 w-10 text-white">
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Payment Gateways</h3>
<p class="text-gray-600">Seamlessly connect with leading payment providers like Stripe, PayPal, and more for secure transactions.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-truck h-10 w-10 text-white">
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path>
<path d="M15 18H9"></path>
<path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path>
<circle cx="17" cy="18" r="2"></circle>
<circle cx="7" cy="18" r="2"></circle>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Shipping & Logistics</h3>
<p class="text-gray-600">Automate your shipping with integrations for FedEx, UPS, DHL, and other major carriers.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-bar-chart h-10 w-10 text-white">
<line x1="12" y1="20" x2="12" y2="10"></line>
<line x1="18" y1="20" x2="18" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="16"></line>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Analytics</h3>
<p class="text-gray-600">Gain deep insights into your sales and customer behavior with Google Analytics, Mixpanel, etc.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-mail h-10 w-10 text-white">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Email Marketing</h3>
<p class="text-gray-600">Sync customer data with Mailchimp, Klaviyo, and other platforms for targeted campaigns.</p>
</div>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-package h-10 w-10 text-white">
<path d="m7.5 4.27 9 5.15"></path>
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Management</h3>
<p class="text-gray-600">Manage your inventory with ease using integrations with Shopify, WooCommerce, and other platforms.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-users h-10 w-10 text-white">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">CRM & ERP Systems</h3>
<p class="text-gray-600">Integrate with Salesforce, HubSpot, and other enterprise solutions for unified operations.</p>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-center text-center transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="bg-orange-500 rounded-full p-2 mb-4">
<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-globe h-10 w-10 text-white">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
<path d="M2 12h20"></path>
</svg>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-2">Custom APIs</h3>
<p class="text-gray-600">Extend functionality with our robust API, allowing you to build custom connections and workflows.</p>
</div>
</div>
<div class="mt-12">
<a href="#"
class="border-b-2 border-white flex items-center gap-2 text-center justify-center max-w-max mx-auto font-semibold hover:border-orange-500">
<span>View All Integrations</span>
<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-arrow-right h-4 w-4">
<path d="M5 12h14"></path>
<path d="M12 5l7 7-7 7"></path>
</svg>
</a>
</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