Cta SaaS Minimal

This carefully crafted Call To Action (CTA) 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: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Sale, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Component styles */
.cta-section {
position: relative;
overflow: hidden;
background-color: var(--color-white);
padding: var(--spacing-16) 0;
}
.container {
max-width: 80rem; /* 7xl = 80rem */
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.title {
font-size: 1.875rem; /* text-3xl */
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.description {
margin-top: var(--spacing-4);
max-width: 42rem; /* max-w-2xl */
font-size: 1.125rem; /* text-lg */
line-height: 2rem; /* leading-8 */
color: var(--color-gray-600);
}
.buttons-wrapper {
margin-top: var(--spacing-8);
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
padding: var(--spacing-3) var(--spacing-6);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.button-primary {
background-color: var(--color-blue-600);
color: var(--color-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.button-primary:hover {
background-color: var(--color-blue-500);
}
.button-secondary {
background-color: var(--color-white);
color: var(--color-gray-900);
border: 1px solid var(--color-gray-300);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.button-secondary:hover {
background-color: #f9fafb; /* gray-50 */
}
.button:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-blue-600);
}
.button-secondary:focus-visible {
outline: 2px solid var(--color-gray-600);
}
.cta-list {
margin-top: var(--spacing-10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
}
.cta-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.cta-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-blue-600);
}
.cta-text {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Responsive styles */
@media (min-width: 640px) {
.container {
padding: 0 var(--spacing-6);
}
.cta-section {
padding: var(--spacing-24) 0;
}
.title {
font-size: 2.25rem; /* text-4xl */
}
.buttons-wrapper {
flex-direction: row;
gap: var(--spacing-6);
}
.cta-list {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.container {
padding: 0 var(--spacing-8);
}
.title {
font-size: 3rem; /* text-5xl */
}
}
</style>
<section class="cta-section">
<div class="container">
<div class="content-wrapper">
<h2 class="title">
Transform Your Business Today
</h2>
<p class="description">
Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
</p>
<div class="buttons-wrapper">
<a
href="#"
class="button button-primary"
role="button"
aria-label="Start free trial"
>
Start Free Trial
</a>
<a
href="#"
class="button button-secondary"
role="button"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
<div class="cta-list">
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">30-day free trial</span>
</div>
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">No credit card required</span>
</div>
<div class="cta-item">
<svg class="cta-icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="feature-text">Cancel anytime</span>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Call To Action (CTA)
@industry: SaaS
@style: Minimal
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="relative overflow-hidden bg-white py-16 sm:py-24">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
Transform Your Business Today
</h2>
<p class="mt-4 max-w-2xl text-lg leading-8 text-gray-600">
Join thousands of successful companies who have already streamlined their operations with our enterprise-grade SaaS platform.
</p>
<div class="mt-8 flex flex-col gap-4 sm:flex-row sm:gap-6">
<a
href="#"
class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
role="button"
aria-label="Start free trial"
>
Start Free Trial
</a>
<a
href="#"
class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
role="button"
aria-label="Schedule demo"
>
Schedule Demo
</a>
</div>
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center sm:gap-6">
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">30-day free trial</span>
</div>
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">No credit card required</span>
</div>
<div class="flex items-center gap-x-2">
<svg class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
<span class="text-sm text-gray-600">Cancel anytime</span>
</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
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