Component:
Free Integration Software Minimal
Tailwind
Tailwind
React
Vue
Svelte
Astro
HTML / CSS
Colors:
Description:
This carefully crafted Integration component is perfect for Software landing pages, featuring a Minimal 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: Software
@style: Minimal
@category: Page Section, Support, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-50: #eef2ff;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-green-50: #f0fdf4;
--color-green-500: #22c55e;
--color-green-700: #15803d;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.integration-section {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.integration-section {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.integration-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.integration-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 640px) {
.integration-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.integration-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.integration-card {
position: relative;
border-radius: 0.75rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s;
}
.integration-card:hover {
box-shadow: var(--shadow-md);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.icon-wrapper {
height: 3rem;
width: 3rem;
background-color: var(--color-indigo-50);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrapper svg {
height: 2rem;
width: 2rem;
color: var(--color-indigo-600);
}
.popular-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
background-color: var(--color-green-50);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-green-700);
}
.integration-card-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-gray-900);
}
.integration-card-description {
margin-top: 0.5rem;
font-size: 1rem;
color: var(--color-gray-600);
}
.feature-list {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feature-item {
display: flex;
align-items: center;
font-size: 0.875rem;
color: var(--color-gray-600);
}
.integration-feature-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-green-500);
margin-right: 0.5rem;
}
.card-link {
margin-top: 2rem;
display: flex;
align-items: center;
}
.learn-more {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-indigo-600);
text-decoration: none;
transition: color 0.2s;
}
.learn-more:hover {
color: var(--color-indigo-500);
}
.learn-more span {
margin-left: 0.25rem;
}
</style>
<section class="integration-section" aria-labelledby="integration-heading">
<div class="container">
<!-- Section Header -->
<div class="integration-header">
<span class="header-badge">Powerful Integrations</span>
<h2 id="integration-heading" class="header-title">
Connect with your essential business tools
</h2>
<p class="header-description">
Seamlessly integrate with the tools your small business already uses, no technical expertise required
</p>
</div>
<!-- Featured Integrations -->
<div class="integration-grid">
<!-- QuickBooks Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div>
<span class="popular-badge">Popular</span>
</div>
</div>
<h3 class="integration-card-title">QuickBooks Integration</h3>
<p class="integration-card-description">Automatically sync invoices, expenses, and financial data. Save hours on bookkeeping and ensure accuracy.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time sync
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated reconciliation
</div>
</div>
<div class="card-link">
<a href="#quickbooks" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Google Workspace Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
</div>
<h3 class="integration-card-title">Google Workspace</h3>
<p class="integration-card-description">Seamlessly connect with Gmail, Calendar, and Drive. Keep your team's communication and files in sync.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Email integration
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Calendar sync
</div>
</div>
<div class="card-link">
<a href="#google" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Stripe Integration -->
<div class="integration-card">
<div class="card-header">
<div class="icon-wrapper">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 13.5h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H5.25a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25zm13.5-13.5h-13.5a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25z" />
</svg>
</div>
</div>
<h3 class="integration-card-title">Stripe Payments</h3>
<p class="integration-card-description">Accept payments and manage subscriptions with ease. Automatic invoice generation and payment tracking.</p>
<div class="feature-list">
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Secure payments
</div>
<div class="feature-item">
<svg class="integration-feature-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated billing
</div>
</div>
<div class="card-link">
<a href="#stripe" class="learn-more">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Integration
@industry: Software
@style: Minimal
@category: Page Section, Support, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="integration-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-3xl text-center mb-16">
<span class="text-lg font-semibold text-indigo-600">Powerful Integrations</span>
<h2 id="integration-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Connect with your essential business tools
</h2>
<p class="mt-4 text-lg text-gray-600">
Seamlessly integrate with the tools your small business already uses, no technical expertise required
</p>
</div>
<!-- Featured Integrations -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- QuickBooks Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div class="flex items-center">
<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">Popular</span>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">QuickBooks Integration</h3>
<p class="mt-2 text-base text-gray-600">Automatically sync invoices, expenses, and financial data. Save hours on bookkeeping and ensure accuracy.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Real-time sync
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated reconciliation
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#quickbooks" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Google Workspace Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">Google Workspace</h3>
<p class="mt-2 text-base text-gray-600">Seamlessly connect with Gmail, Calendar, and Drive. Keep your team's communication and files in sync.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Email integration
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Calendar sync
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#google" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<!-- Stripe Integration -->
<div class="relative rounded-xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-center justify-between mb-8">
<div class="h-12 w-12 bg-indigo-50 rounded-lg flex items-center justify-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 13.5h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H5.25a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25zm13.5-13.5h-13.5a2.25 2.25 0 00-2.25 2.25v13.5a2.25 2.25 0 002.25 2.25h13.5a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25z" />
</svg>
</div>
</div>
<h3 class="text-lg font-medium text-gray-900">Stripe Payments</h3>
<p class="mt-2 text-base text-gray-600">Accept payments and manage subscriptions with ease. Automatic invoice generation and payment tracking.</p>
<div class="mt-6 space-y-2">
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Secure payments
</div>
<div class="flex items-center text-sm text-gray-600">
<svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Automated billing
</div>
</div>
<div class="mt-8 flex items-center">
<a href="#stripe" class="text-sm font-semibold text-indigo-600 hover:text-indigo-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</section>
This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro 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