Component:
Faq Software Minimal
Colors:
Description:
This carefully crafted FAQ 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: FAQ
@industry: Software
@style: Minimal
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-indigo-600: #4f46e5;
}
* {
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";
}
.faq-section {
background-color: var(--color-white);
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 640px) {
.faq-section {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.container {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
}
.faq-header {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 4rem;
}
.faq-label {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-indigo-600);
}
.faq-title {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.2;
color: var(--color-gray-900);
letter-spacing: -0.025em;
}
@media (min-width: 640px) {
.faq-title {
font-size: 2.25rem;
}
}
.faq-description {
margin-top: 1rem;
font-size: 1.125rem;
color: var(--color-gray-600);
}
.faq-categories {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.faq-categories {
grid-template-columns: repeat(3, 1fr);
}
}
.faq-category {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.category-title {
font-size: 1.125rem;
font-weight: 500;
color: var(--color-indigo-600);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.faq-item:not(:last-child) {
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-gray-200);
}
.faq-question {
display: flex;
width: 100%;
align-items: flex-start;
justify-content: space-between;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.question-text {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-900);
}
.question-icon-container {
margin-left: 1.5rem;
display: flex;
align-items: center;
}
.question-icon {
height: 1.5rem;
width: 1.5rem;
color: var(--color-gray-400);
transition: transform 0.2s ease;
}
.faq-answer {
margin-top: 0.5rem;
padding-right: 3rem;
display: none;
}
.faq-answer.active {
display: block;
}
.answer-text {
font-size: 1rem;
color: var(--color-gray-600);
}
.rotate-180 {
transform: rotate(180deg);
}
</style>
<section class="faq-section" aria-labelledby="faq-heading">
<div class="container">
<!-- Section Header -->
<div class="faq-header">
<span class="faq-label">FAQ</span>
<h2 id="faq-heading" class="faq-title">
Frequently asked questions
</h2>
<p class="faq-description">
Find answers to common questions about our software platform. Can't find what you're looking for? Contact our support team.
</p>
</div>
<!-- FAQ Categories -->
<div class="faq-categories">
<!-- Getting Started -->
<div class="faq-category">
<h3 class="category-title">Getting Started</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">How do I start using the platform?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Sign up for a free 14-day trial, no credit card required. Our onboarding team will help you set up your account and guide you through the essential features.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">What's included in the free trial?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">The trial includes all Professional plan features, including team collaboration, advanced reporting, and priority support.</p>
</dd>
</div>
</dl>
</div>
<!-- Billing & Pricing -->
<div class="faq-category">
<h3 class="category-title">Billing & Pricing</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">How does your pricing work?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">We offer three plans: Starter ($29/month), Professional ($79/month), and Enterprise (custom pricing). All plans can be billed monthly or annually with a 20% discount.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">Can I change my plan later?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</dd>
</div>
</dl>
</div>
<!-- Features & Integration -->
<div class="faq-category">
<h3 class="category-title">Features & Integration</h3>
<dl class="faq-list">
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">What integrations do you offer?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">We integrate with popular tools like QuickBooks, Stripe, Google Workspace, and more. Custom integrations are available on Enterprise plans.</p>
</dd>
</div>
<div class="faq-item">
<dt>
<button class="faq-question" aria-expanded="false">
<span class="question-text">Is API access included?</span>
<span class="question-icon-container">
<svg class="question-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="faq-answer">
<p class="answer-text">Yes, all plans include API access. Basic plans have rate limits, while Professional and Enterprise plans offer higher limits and advanced endpoints.</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', function() {
const answer = this.parentNode.nextElementSibling;
const icon = this.querySelector('.question-icon');
// Toggle active state
answer.classList.toggle('active');
icon.classList.toggle('rotate-180');
// Update aria-expanded
const isExpanded = answer.classList.contains('active');
this.setAttribute('aria-expanded', isExpanded);
});
});
});
</script>
<!--
@type: FAQ
@industry: Software
@style: Minimal
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-16 sm:py-24" aria-labelledby="faq-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">FAQ</span>
<h2 id="faq-heading" class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Frequently asked questions
</h2>
<p class="mt-4 text-lg text-gray-600">
Find answers to common questions about our software platform. Can't find what you're looking for? Contact our support team.
</p>
</div>
<!-- FAQ Categories -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<!-- Getting Started -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Getting Started</h3>
<dl class="space-y-6 divide-y divide-gray-200" x-data="{ selected: null }">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">How do I start using the platform?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Sign up for a free 14-day trial, no credit card required. Our onboarding team will help you set up your account and guide you through the essential features.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">What's included in the free trial?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">The trial includes all Professional plan features, including team collaboration, advanced reporting, and priority support.</p>
</dd>
</div>
</dl>
</div>
<!-- Billing & Pricing -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Billing & Pricing</h3>
<dl class="space-y-6 divide-y divide-gray-200">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">How does your pricing work?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">We offer three plans: Starter ($29/month), Professional ($79/month), and Enterprise (custom pricing). All plans can be billed monthly or annually with a 20% discount.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">Can I change my plan later?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Yes, you can upgrade or downgrade your plan at any time. Changes will be reflected in your next billing cycle.</p>
</dd>
</div>
</dl>
</div>
<!-- Features & Integration -->
<div class="space-y-6">
<h3 class="text-lg font-medium text-indigo-600">Features & Integration</h3>
<dl class="space-y-6 divide-y divide-gray-200">
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">What integrations do you offer?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">We integrate with popular tools like QuickBooks, Stripe, Google Workspace, and more. Custom integrations are available on Enterprise plans.</p>
</dd>
</div>
<div class="pt-6" x-data="{ open: false }">
<dt>
<button @click="open = !open" class="flex w-full items-start justify-between text-left" :aria-expanded="open">
<span class="text-base font-medium text-gray-900">Is API access included?</span>
<span class="ml-6 flex items-center">
<svg class="h-6 w-6 text-gray-400" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd x-show="open" class="mt-2 pr-12">
<p class="text-base text-gray-600">Yes, all plans include API access. Basic plans have rate limits, while Professional and Enterprise plans offer higher limits and advanced endpoints.</p>
</dd>
</div>
</dl>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script> 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