Component:
Feature SaaS Minimal
Colors:
Description:
This carefully crafted Feature 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: Feature
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
/* Colors */
--color-white: #ffffff;
--color-blue-50: #eff6ff;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Font Sizes */
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* Other */
--border-radius-lg: 0.5rem;
--border-radius-2xl: 1rem;
--transition-duration: 200ms;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
.features-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.container {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
}
/* Header Styles */
.section-header {
max-width: 48rem; /* max-w-3xl */
margin: 0 auto var(--spacing-16);
text-align: center;
}
.section-label {
color: var(--color-blue-600);
font-size: var(--text-sm);
font-weight: 500;
display: block;
margin-bottom: var(--spacing-2);
}
.section-title {
font-size: var(--text-3xl);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.section-description {
margin-top: var(--spacing-4);
font-size: var(--text-lg);
line-height: 2rem;
color: var(--color-gray-600);
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-8);
}
/* Feature Card */
.feature-card {
position: relative;
border-radius: var(--border-radius-2xl);
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 var(--transition-duration);
}
.feature-card:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.feature-icon {
display: inline-flex;
height: 3rem;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-lg);
background-color: var(--color-blue-50);
margin-bottom: var(--spacing-6);
}
.feature-icon svg {
height: 1.5rem;
width: 1.5rem;
color: var(--color-blue-600);
}
.feature-title {
font-size: var(--text-lg);
font-weight: 600;
line-height: 2rem;
color: var(--color-gray-900);
}
.feature-description {
margin-top: var(--spacing-3);
font-size: var(--text-base);
line-height: 1.75rem;
color: var(--color-gray-600);
}
/* CTA Section */
.cta-section {
margin-top: var(--spacing-16);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-lg);
background-color: var(--color-blue-600);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--text-base);
font-weight: 500;
color: var(--color-white);
text-decoration: none;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
transition: background-color var(--transition-duration);
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-button svg {
margin-left: var(--spacing-2);
height: 1rem;
width: 1rem;
}
.cta-note {
margin-top: var(--spacing-4);
font-size: var(--text-sm);
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.features-section {
padding: var(--spacing-16) var(--spacing-6);
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.section-title {
font-size: var(--text-4xl);
}
}
@media (min-width: 1024px) {
.features-section {
padding: var(--spacing-20) var(--spacing-8);
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="features-section" aria-labelledby="features-heading">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<span class="section-label">Features</span>
<h2 id="features-heading" class="section-title">
Everything you need to streamline your workflow
</h2>
<p class="section-description">
Powerful features to help you manage, automate, and scale your business operations with confidence.
</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="feature-title">Enterprise Security</h3>
<p class="feature-description">
Bank-grade encryption and security measures to protect your sensitive data and ensure compliance.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<h3 class="feature-title">Real-time Analytics</h3>
<p class="feature-description">
Get instant insights with powerful analytics and customizable dashboards for data-driven decisions.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<h3 class="feature-title">Seamless Integration</h3>
<p class="feature-description">
Connect with your favorite tools through our extensive API and pre-built integrations.
</p>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
</div>
<h3 class="feature-title">Automated Workflows</h3>
<p class="feature-description">
Build custom workflows and automate repetitive tasks to boost team productivity.
</p>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</div>
<h3 class="feature-title">Team Collaboration</h3>
<p class="feature-description">
Work together seamlessly with real-time collaboration tools and team workspaces.
</p>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon">
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
</div>
<h3 class="feature-title">Advanced Permissions</h3>
<p class="feature-description">
Fine-grained access controls and role-based permissions to manage team access effectively.
</p>
</div>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" aria-label="Start free trial">
Start free trial
<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<p class="cta-note">No credit card required. 14-day free trial.</p>
</div>
</div>
</section>
<!--
@type: Feature
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="features-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-blue-600 font-medium mb-2 block text-sm">Features</span>
<h2 id="features-heading" class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Everything you need to streamline your workflow
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
Powerful features to help you manage, automate, and scale your business operations with confidence.
</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Enterprise Security</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Bank-grade encryption and security measures to protect your sensitive data and ensure compliance.
</p>
</div>
<!-- Feature 2 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Real-time Analytics</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Get instant insights with powerful analytics and customizable dashboards for data-driven decisions.
</p>
</div>
<!-- Feature 3 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Seamless Integration</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Connect with your favorite tools through our extensive API and pre-built integrations.
</p>
</div>
<!-- Feature 4 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Automated Workflows</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Build custom workflows and automate repetitive tasks to boost team productivity.
</p>
</div>
<!-- Feature 5 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Team Collaboration</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Work together seamlessly with real-time collaboration tools and team workspaces.
</p>
</div>
<!-- Feature 6 -->
<div class="relative rounded-2xl border border-gray-200 bg-white p-8 shadow-sm hover:shadow-md transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
</div>
<h3 class="text-lg font-semibold leading-8 text-gray-900">Advanced Permissions</h3>
<p class="mt-3 text-base leading-7 text-gray-600">
Fine-grained access controls and role-based permissions to manage team access effectively.
</p>
</div>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" aria-label="Start free trial">
Start free trial
<svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
<p class="mt-4 text-sm text-gray-600">No credit card required. 14-day free trial.</p>
</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