Component:
Integration SaaS Minimal
Colors:
Description:
This carefully crafted Integration component is perfect for SaaS 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: SaaS
@style: Minimal
@category: Support
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
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";
}
/* Component Styles */
.integration-section {
background-color: var(--color-white);
padding: var(--spacing-16) 0;
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.section-header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-title {
font-size: 1.875rem; /* text-3xl */
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.section-description {
margin-top: var(--spacing-4);
font-size: 1.125rem; /* text-lg */
line-height: 1.75;
color: var(--color-gray-600);
}
.integration-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
.integration-card {
position: relative;
border-radius: 1rem;
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
padding: var(--spacing-8);
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: box-shadow 0.15s ease-in-out;
}
.integration-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.integration-logo {
height: 2rem; /* h-8 */
width: auto;
margin-bottom: 1.5rem; /* mb-6 */
}
.integration-title {
font-size: 1.125rem; /* text-lg */
font-weight: 600;
line-height: 1.75;
color: var(--color-gray-900);
}
.integration-description {
margin-top: var(--spacing-4);
font-size: 1rem; /* text-base */
color: var(--color-gray-600);
}
.integration-link {
margin-top: var(--spacing-6);
display: flex;
align-items: center;
gap: 0.75rem;
}
.learn-more-btn {
font-size: 0.875rem; /* text-sm */
font-weight: 600;
line-height: 1.5;
color: var(--color-blue-600);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.learn-more-btn:hover {
color: var(--color-blue-500);
}
.cta-section {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button span {
margin-left: 0.5rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.integration-section {
padding: var(--spacing-24) 0;
}
.container {
padding: 0 var(--spacing-6);
}
.section-title {
font-size: 2.25rem; /* text-4xl */
}
.integration-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.integration-grid {
grid-template-columns: repeat(3, 1fr);
}
.cta-section {
margin-top: var(--spacing-16);
}
}
</style>
<section class="integration-section">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 class="section-title">
Seamlessly integrate with your favorite tools
</h2>
<p class="section-description">
Connect your workflow with 100+ integrations. Our platform works with the tools you already use and love.
</p>
</div>
<!-- Integration Grid -->
<div class="integration-grid">
<!-- Slack Integration -->
<div class="integration-card">
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" class="integration-logo" />
<h3 class="integration-title">Slack Integration</h3>
<p class="integration-description">
Get real-time notifications and updates directly in your Slack channels. Keep your team in sync without switching context.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Dropbox Integration -->
<div class="integration-card">
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" class="integration-logo" />
<h3 class="integration-title">Dropbox Integration</h3>
<p class="integration-description">
Automatically sync and manage your files across Dropbox. Access and share documents seamlessly.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Google Integration -->
<div class="integration-card">
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" class="integration-logo" />
<h3 class="integration-title">Google Workspace</h3>
<p class="integration-description">
Integrate with Google Calendar, Drive, and other Google services for a unified workflow experience.
</p>
<div class="integration-link">
<button type="button" class="learn-more-btn">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button">
View all integrations
<span aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
<!--
@type: Integration
@industry: SaaS
@style: Minimal
@category: Support
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24">
<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">
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Seamlessly integrate with your favorite tools
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
Connect your workflow with 100+ integrations. Our platform works with the tools you already use and love.
</p>
</div>
<!-- Integration Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Slack Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Slack Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/slack-logo-200x51.webp" alt="Slack" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Slack Integration</h3>
<p class="mt-4 text-base text-gray-600">
Get real-time notifications and updates directly in your Slack channels. Keep your team in sync without switching context.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Dropbox Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Dropbox Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/dropbox-logo-200x39.webp" alt="Dropbox" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Dropbox Integration</h3>
<p class="mt-4 text-base text-gray-600">
Automatically sync and manage your files across Dropbox. Access and share documents seamlessly.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
<!-- Google Integration -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<!-- Google Logo -->
<img src="https://landinggo.com/assets/img/stock/logo-cloud/google-logo-200x83.webp" alt="Google" class="h-8 w-auto mb-6" />
<h3 class="text-lg font-semibold leading-8 text-gray-900">Google Workspace</h3>
<p class="mt-4 text-base text-gray-600">
Integrate with Google Calendar, Drive, and other Google services for a unified workflow experience.
</p>
<div class="mt-6 flex items-center gap-x-3">
<button type="button" class="text-sm font-semibold leading-6 text-blue-600 hover:text-blue-500">
Learn more <span aria-hidden="true">→</span>
</button>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 lg:mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-base font-medium text-white bg-blue-600 hover:bg-blue-700 transition duration-150 ease-in-out">
View all integrations
<span class="ml-2" aria-hidden="true">→</span>
</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