Component:
Feature Software Minimal
Colors:
Description:
This carefully crafted Feature component is perfect for Software 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: Software
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
* {
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";
}
.feature {
background-color: var(--color-white);
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.feature {
padding: 6rem 1.5rem;
}
}
.container {
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
.feature-header {
text-align: center;
max-width: 48rem;
margin: 0 auto 4rem;
}
.header-badge {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.header-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
@media (min-width: 640px) {
.header-title {
font-size: 2.25rem;
}
}
.header-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.feature-section {
position: relative;
margin-top: 5rem;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 1024px) {
.feature-grid {
grid-template-columns: repeat(12, 1fr);
}
}
.feature-content {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.feature-content.left {
grid-column: span 5;
}
.feature-content.right {
grid-column: 8 / span 5;
}
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--color-gray-900);
}
.feature-description {
margin-top: 0.75rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.feature-list {
margin-top: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.feature-item {
display: flex;
}
.feature-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.375rem;
background-color: var(--color-indigo-500);
color: var(--color-white);
}
.feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.feature-text {
margin-left: 1rem;
}
.feature-item-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
}
.feature-item-description {
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
@media (min-width: 1024px) {
.feature-image.right {
grid-column: 6 / span 7;
}
.feature-image.left {
grid-column: span 6;
}
}
.image-container {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.image-placeholder {
background-color: var(--color-gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-500);
}
.image-placeholder.wide {
aspect-ratio: 16 / 9;
}
.image-placeholder.square {
aspect-ratio: 4 / 3;
}
</style>
<section class="feature" aria-labelledby="features-heading">
<div class="container">
<!-- Section Header -->
<div class="feature-header">
<span class="header-badge">Powerful Features</span>
<h2 id="features-heading" class="header-title">
Built specifically for small businesses
</h2>
<p class="header-description">
Our software simplifies complex business processes with intuitive tools designed for companies without dedicated IT departments.
</p>
</div>
<!-- Feature 1: Asymmetric layout with image on right -->
<div class="feature-section">
<div class="feature-grid">
<!-- Content on left -->
<div class="feature-content left">
<h3 class="feature-title">
Streamlined customer management
</h3>
<p class="feature-description">
Manage your entire customer lifecycle in one place, from lead capture to ongoing support.
</p>
<div class="feature-list">
<div class="feature-item">
<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="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">360° customer profiles</h4>
<p class="feature-item-description">
Get complete visibility into customer interactions, history, and preferences in a single view.
</p>
</div>
</div>
<div class="feature-item">
<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="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Smart communication tools</h4>
<p class="feature-item-description">
Send personalized emails, schedule follow-ups, and track all customer communications.
</p>
</div>
</div>
<div class="feature-item">
<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 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Sales pipeline management</h4>
<p class="feature-item-description">
Visualize your sales process and track deals from lead to close with customizable pipelines.
</p>
</div>
</div>
</div>
</div>
<!-- Image on right -->
<div class="feature-image right">
<div class="image-container">
<div class="image-placeholder wide">
<span>CRM dashboard image placeholder</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Asymmetric layout with image on left -->
<div class="feature-section">
<div class="feature-grid">
<!-- Image on left -->
<div class="feature-image left">
<div class="image-container">
<div class="image-placeholder square">
<span>Financial dashboard image placeholder</span>
</div>
</div>
</div>
<!-- Content on right -->
<div class="feature-content right">
<h3 class="feature-title">
Simplified financial management
</h3>
<p class="feature-description">
Take control of your business finances without the complexity of enterprise accounting software.
</p>
<div class="feature-list">
<div class="feature-item">
<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="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Intuitive invoicing</h4>
<p class="feature-item-description">
Create professional invoices in seconds and get paid faster with automated payment reminders.
</p>
</div>
</div>
<div class="feature-item">
<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="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Expense tracking</h4>
<p class="feature-item-description">
Capture receipts, categorize expenses, and generate reports for tax time with minimal effort.
</p>
</div>
</div>
<div class="feature-item">
<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 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
<div class="feature-text">
<h4 class="feature-item-title">Financial reporting</h4>
<p class="feature-item-description">
Access clear financial reports that help you understand your business performance at a glance.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Feature
@industry: Software
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" 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-lg font-semibold text-indigo-600">Powerful Features</span>
<h2 id="features-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Built specifically for small businesses
</h2>
<p class="mt-4 text-lg text-gray-600">
Our software simplifies complex business processes with intuitive tools designed for companies without dedicated IT departments.
</p>
</div>
<!-- Feature 1: Asymmetric layout with image on right -->
<div class="relative mt-20">
<div class="lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
<!-- Content on left -->
<div class="lg:col-span-5">
<h3 class="text-2xl font-bold tracking-tight text-gray-900">
Streamlined customer management
</h3>
<p class="mt-3 text-lg text-gray-600">
Manage your entire customer lifecycle in one place, from lead capture to ongoing support.
</p>
<div class="mt-10 space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">360° customer profiles</h4>
<p class="mt-2 text-sm text-gray-600">
Get complete visibility into customer interactions, history, and preferences in a single view.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Smart communication tools</h4>
<p class="mt-2 text-sm text-gray-600">
Send personalized emails, schedule follow-ups, and track all customer communications.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" 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 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Sales pipeline management</h4>
<p class="mt-2 text-sm text-gray-600">
Visualize your sales process and track deals from lead to close with customizable pipelines.
</p>
</div>
</div>
</div>
</div>
<!-- Image on right -->
<div class="mt-10 lg:mt-0 lg:col-span-7 lg:col-start-6">
<div class="relative rounded-2xl overflow-hidden shadow-xl">
<div class="bg-gray-200 aspect-[16/9] flex items-center justify-center">
<span class="text-gray-500">CRM dashboard image placeholder</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature 2: Asymmetric layout with image on left -->
<div class="relative mt-24">
<div class="lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
<!-- Image on left -->
<div class="lg:col-span-6">
<div class="relative rounded-2xl overflow-hidden shadow-xl">
<div class="bg-gray-200 aspect-[4/3] flex items-center justify-center">
<span class="text-gray-500">Financial dashboard image placeholder</span>
</div>
</div>
</div>
<!-- Content on right -->
<div class="mt-10 lg:mt-0 lg:col-span-5 lg:col-start-8">
<h3 class="text-2xl font-bold tracking-tight text-gray-900">
Simplified financial management
</h3>
<p class="mt-3 text-lg text-gray-600">
Take control of your business finances without the complexity of enterprise accounting software.
</p>
<div class="mt-10 space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 01-.75.75h-.75m-6-1.5H2.25m19.5 0v.75c0 .414-.336.75-.75.75h-.75m-1.5 0H21m-1.5 0h.75m-.75 0v-.75c0-.414.336-.75.75-.75h.75m-.375-.375H21a.375.375 0 01.375.375v.75a.375.375 0 01-.375.375h-.375m-.375 0h-.375m.375 0v-.375c0-.207.168-.375.375-.375h.375m-.375 0H21" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Intuitive invoicing</h4>
<p class="mt-2 text-sm text-gray-600">
Create professional invoices in seconds and get paid faster with automated payment reminders.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Expense tracking</h4>
<p class="mt-2 text-sm text-gray-600">
Capture receipts, categorize expenses, and generate reports for tax time with minimal effort.
</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-md bg-indigo-500 text-white">
<svg class="h-6 w-6" 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 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-base font-medium text-gray-900">Financial reporting</h4>
<p class="mt-2 text-sm text-gray-600">
Access clear financial reports that help you understand your business performance at a glance.
</p>
</div>
</div>
</div>
</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