Component:
Feature Business Modern
Colors:
Description:
This carefully crafted Feature 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: Feature
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-100: #e0e7ff;
--color-indigo-600: #4f46e5;
--color-indigo-700: #4338ca;
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Component Styles */
.features-section {
background-color: var(--color-slate-50);
padding: 4rem 1rem;
}
.section-header {
max-width: 48rem;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
}
.section-badge {
color: var(--color-indigo-600);
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
display: block;
margin-bottom: 0.5rem;
}
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
}
.section-description {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--color-slate-600);
}
.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.feature-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
transition: box-shadow 0.3s ease;
}
.feature-card:hover {
box-shadow: var(--shadow-xl);
}
.feature-icon-container {
display: inline-flex;
height: 3rem;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background-color: var(--color-indigo-100);
margin-bottom: 1.5rem;
}
.feature-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--color-indigo-600);
}
.feature-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-slate-900);
}
.feature-description {
margin-top: 0.75rem;
font-size: 1rem;
color: var(--color-slate-600);
}
.feature-link-container {
margin-top: 1.5rem;
}
.feature-link {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-indigo-600);
text-decoration: none;
}
.feature-link:hover {
color: var(--color-indigo-700);
}
.feature-link-icon {
margin-left: 0.5rem;
height: 1rem;
width: 1rem;
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.features-section {
padding: 6rem 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-section {
padding: 8rem 2rem;
}
.section-header {
margin-bottom: 5rem;
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="features-section" aria-labelledby="features-heading">
<div>
<!-- Section Header -->
<div class="section-header">
<span class="section-badge">Business Solutions</span>
<h2 id="features-heading" class="section-title">
Streamline Your Business Operations
</h2>
<p class="section-description">
Our comprehensive suite of business tools helps you optimize workflows, increase productivity, and drive sustainable growth.
</p>
</div>
<!-- Features Grid -->
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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>
<h3 class="feature-title">Financial Analytics</h3>
<p class="feature-description">
Gain deep insights into your financial performance with real-time analytics and customizable reporting dashboards.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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 Management</h3>
<p class="feature-description">
Streamline team collaboration with integrated project management tools, task assignments, and progress tracking.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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">Enterprise Security</h3>
<p class="feature-description">
Protect your business data with enterprise-grade security protocols, encryption, and compliance management tools.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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">Process Automation</h3>
<p class="feature-description">
Automate repetitive tasks and workflows to reduce manual effort, minimize errors, and increase operational efficiency.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 5 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
</div>
<h3 class="feature-title">Market Insights</h3>
<p class="feature-description">
Stay ahead of market trends with AI-powered analytics that provide actionable insights for strategic decision-making.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 6 -->
<div class="feature-card">
<div class="feature-icon-container">
<svg class="feature-icon" xmlns="http://www.w3.org/2000/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 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<h3 class="feature-title">Resource Optimization</h3>
<p class="feature-description">
Optimize resource allocation and utilization with intelligent planning tools that maximize productivity and ROI.
</p>
<div class="feature-link-container">
<a href="#" class="feature-link">
Learn more
<svg class="feature-link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!--
@type: Feature
@industry: Business
@style: Modern
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 sm:py-24 lg:py-32" 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 lg:mb-20">
<span class="text-indigo-600 font-medium text-sm tracking-wide uppercase block mb-2">Business Solutions</span>
<h2 id="features-heading" class="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
Streamline Your Business Operations
</h2>
<p class="mt-4 text-lg leading-7 text-slate-600">
Our comprehensive suite of business tools helps you optimize workflows, increase productivity, and drive sustainable growth.
</p>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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>
<h3 class="text-lg font-semibold text-slate-900">Financial Analytics</h3>
<p class="mt-3 text-base text-slate-600">
Gain deep insights into your financial performance with real-time analytics and customizable reporting dashboards.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 2 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="text-lg font-semibold text-slate-900">Team Management</h3>
<p class="mt-3 text-base text-slate-600">
Streamline team collaboration with integrated project management tools, task assignments, and progress tracking.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 3 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="text-lg font-semibold text-slate-900">Enterprise Security</h3>
<p class="mt-3 text-base text-slate-600">
Protect your business data with enterprise-grade security protocols, encryption, and compliance management tools.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 4 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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="text-lg font-semibold text-slate-900">Process Automation</h3>
<p class="mt-3 text-base text-slate-600">
Automate repetitive tasks and workflows to reduce manual effort, minimize errors, and increase operational efficiency.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 5 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Market Insights</h3>
<p class="mt-3 text-base text-slate-600">
Stay ahead of market trends with AI-powered analytics that provide actionable insights for strategic decision-making.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
<!-- Feature 6 -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
<div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
<svg class="h-6 w-6 text-indigo-600" xmlns="http://www.w3.org/2000/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 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-slate-900">Resource Optimization</h3>
<p class="mt-3 text-base text-slate-600">
Optimize resource allocation and utilization with intelligent planning tools that maximize productivity and ROI.
</p>
<div class="mt-6">
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-700">
Learn more
<svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</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