Component:
Integration SaaS Modern

Name: Integration SaaS Modern
Availability: InStock
Free
Tailwind
React
Vue
Svelte
Astro
Tags: Integration Page Section Content Support SaaS Modern
Colors:
Description:
This carefully crafted Integration component is perfect for SaaS 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: SaaS
@style: Modern
@category: Page Section, Content, Support
@framework: Tailwind
@license: Free
-->

<style>
  .gradient-text {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>

<section class="py-24 px-6">
  <div class="max-w-7xl mx-auto animate-fadeInUp">
    <div class="text-center mb-16">
      <div
        class="inline-flex items-center gap-2 px-4 py-2 mb-6 bg-white/50 backdrop-blur-sm border border-zinc-200 rounded-full">
        <span class="text-sm font-semibold gradient-text">Integrations</span>
      </div>

      <h2 class="text-4xl md:text-5xl font-bold text-zinc-900 mb-6">
        Connect Your Entire<br>
        <span class="gradient-text">Data Ecosystem</span>
      </h2>

      <p class="text-xl text-zinc-600 max-w-3xl mx-auto mb-12">
        Seamlessly integrate with the tools you already use. One platform, infinite possibilities.
      </p>
    </div>

    <!-- Integration Logos Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 mb-12">
      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">Databases</div>
        </div>
      </div>

      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">Cloud Storage</div>
        </div>
      </div>

      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">Analytics</div>
        </div>
      </div>

      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">Email</div>
        </div>
      </div>

      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">CRM</div>
        </div>
      </div>

      <div
        class="bg-white rounded-xl border border-zinc-200 p-6 flex items-center justify-center hover:shadow-lg hover:border-rose-500 transition-all duration-300 group">
        <div class="text-center">
          <div
            class="w-12 h-12 bg-zinc-100 group-hover:bg-rose-100 rounded-lg mx-auto mb-2 flex items-center justify-center transition-colors">
            <svg class="w-6 h-6 text-zinc-600 group-hover:text-rose-600" fill="none" stroke="currentColor"
              viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
          </div>
          <div class="text-sm font-semibold text-zinc-700">APIs</div>
        </div>
      </div>
    </div>

    <div class="text-center">
      <p class="text-zinc-600 mb-6">And 200+ more integrations</p>
      <button
        class="px-6 py-3 bg-rose-500 hover:bg-rose-600 text-white font-semibold rounded-lg transition-all duration-300 hover:scale-105 shadow-lg shadow-rose-500/30">
        View All Integrations
      </button>
    </div>
  </div>
</section>
Integration SaaS Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions
