Component:

Quote Business Modern

Name: Quote Business Modern
Availability: InStock

Free

Tags: Quote Social Proof Business Modern

Colors:

Description:

This carefully crafted Quote component is perfect for Business 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: Quote
@industry: Business
@style: Modern
@category: Social Proof
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --white: #ffffff;
}

/* 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 */
.quote-section {
  background-color: var(--slate-50);
  padding: 3rem 1rem;
  position: relative;
}

.relative {
  position: relative;
}

.quote-container {
  max-width: 48rem; /* 3xl */
  margin-left: auto;
  margin-right: auto;
}

.quote-decoration {
  position: absolute;
  top: -1rem;
  left: -2rem;
  color: var(--indigo-200);
  opacity: 0.2;
  display: none;
}

.quote-decoration svg {
  width: 5rem;
  height: 5rem;
}

.quote-card {
  background-color: var(--white);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--slate-200);
  position: relative;
  overflow: hidden;
}

.quote-decoration-circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  margin-top: -2rem;
  margin-right: -2rem;
  background-color: var(--indigo-50);
  border-radius: 9999px;
  opacity: 0.7;
}

.quote-content {
  position: relative;
  z-index: 10;
}

.quote-text {
  color: var(--slate-900);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.quote-footer {
  margin-top: 2rem;
}

.quote-author-container {
  display: flex;
  align-items: center;
}

.quote-author-container > * + * {
  margin-left: 1rem;
}

.quote-author-image {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid var(--indigo-100);
}

.quote-author-name {
  color: var(--slate-900);
  font-weight: 500;
}

.quote-author-title {
  color: var(--slate-600);
  font-size: 0.875rem;
}

.quote-source {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--slate-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quote-source-label {
  font-size: 0.875rem;
  color: var(--slate-500);
}

.quote-source-publication {
  color: var(--slate-700);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.quote-source-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  color: var(--indigo-600);
}

.quote-cta {
  margin-top: 2rem;
  text-align: center;
}

.quote-cta-link {
  display: inline-flex;
  align-items: center;
  color: var(--indigo-600);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.quote-cta-link:hover {
  color: var(--indigo-700);
}

.quote-cta-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
}

/* Responsive styles */
@media (min-width: 640px) {
  .quote-section {
    padding: 4rem 1.5rem;
  }
  
  .quote-card {
    padding: 2rem;
  }
  
  .quote-text {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .quote-section {
    padding: 5rem 2rem;
  }
  
  .quote-decoration {
    display: block;
  }
  
  .quote-card {
    padding: 2.5rem;
  }
  
  .quote-text {
    font-size: 1.5rem;
  }
}
</style>

<section class="quote-section" aria-labelledby="quote-heading">
  <div>
    <div class="relative">
      <div class="quote-container">
        <!-- Decorative elements -->
        <div class="quote-decoration" aria-hidden="true">
          <svg fill="currentColor" viewBox="0 0 24 24">
            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
          </svg>
        </div>
        
        <!-- Quote card -->
        <div class="quote-card">
          <div class="quote-decoration-circle"></div>
          
          <!-- Quote content -->
          <blockquote class="quote-content">
            <p class="quote-text">
              "Strategic partnerships have been the cornerstone of our growth. By aligning with companies that share our vision, we've been able to expand our market reach and deliver exceptional value to our clients."
            </p>
            
            <footer class="quote-footer">
              <div class="quote-author-container">
                <!-- Business executive image -->
                <img 
                  src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" 
                  alt="Michael Richardson" 
                  class="quote-author-image"
                  loading="lazy"
                  width="48"
                  height="48">
                <div>
                  <div class="quote-author-name">Michael Richardson</div>
                  <div class="quote-author-title">CEO, Nexus Partners</div>
                </div>
              </div>
            </footer>
          </blockquote>
          
          <!-- Company logo -->
          <div class="quote-source">
            <div class="quote-source-label">Featured in</div>
            <div class="quote-source-publication">
              <svg class="quote-source-icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
              </svg>
              Business Insights Quarterly
            </div>
          </div>
        </div>
        
        <!-- Optional CTA -->
        <div class="quote-cta">
          <a href="#" class="quote-cta-link">
            Read the full interview
            <svg class="quote-cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>


                <!--
@type: Quote
@industry: Business
@style: Modern
@category: Social Proof
@framework: Tailwind
@license: Free
-->

<section class="bg-slate-50 py-12 sm:py-16 lg:py-20" aria-labelledby="quote-heading">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="relative">
      <div class="mx-auto max-w-3xl">
        <!-- Decorative elements -->
        <div class="absolute -top-4 -left-8 text-indigo-200 opacity-20 hidden lg:block" aria-hidden="true">
          <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24">
            <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
          </svg>
        </div>
        
        <!-- Quote card -->
        <div class="bg-white rounded-xl p-6 sm:p-8 lg:p-10 shadow-lg border border-slate-200 relative overflow-hidden">
          <div class="absolute top-0 right-0 w-24 h-24 -mt-8 -mr-8 bg-indigo-50 rounded-full opacity-70"></div>
          
          <!-- Quote content -->
          <blockquote class="relative z-10">
            <p class="text-slate-900 text-lg sm:text-xl lg:text-2xl font-medium leading-relaxed mb-6">
              "Strategic partnerships have been the cornerstone of our growth. By aligning with companies that share our vision, we've been able to expand our market reach and deliver exceptional value to our clients."
            </p>
            
            <footer class="mt-8">
              <div class="flex items-center space-x-4">
                <!-- Business executive image -->
                <img 
                  src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" 
                  alt="Michael Richardson" 
                  class="w-12 h-12 rounded-full border-2 border-indigo-100"
                  loading="lazy"
                  width="48"
                  height="48">
                <div>
                  <div class="text-slate-900 font-medium">Michael Richardson</div>
                  <div class="text-slate-600 text-sm">CEO, Nexus Partners</div>
                </div>
              </div>
            </footer>
          </blockquote>
          
          <!-- Company logo -->
          <div class="mt-8 pt-6 border-t border-slate-100 flex justify-between items-center">
            <div class="text-sm text-slate-500">Featured in</div>
            <div class="text-slate-700 font-medium flex items-center">
              <svg class="w-5 h-5 mr-2 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"></path>
              </svg>
              Business Insights Quarterly
            </div>
          </div>
        </div>
        
        <!-- Optional CTA -->
        <div class="mt-8 text-center">
          <a href="#" class="inline-flex items-center text-indigo-600 font-medium hover:text-indigo-700 transition-colors">
            Read the full interview
            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Quote Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions