Component:
Faq SaaS Minimal
Colors:
Description:
This carefully crafted FAQ 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: FAQ
@industry: SaaS
@style: Minimal
@category: Content, Sale
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-400: #9ca3af;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-gray-200: #e5e7eb;
}
/* Reset */
* {
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";
}
/* Component styles */
.faq-section {
background-color: var(--color-white);
padding: 3rem 1rem;
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.header {
max-width: 48rem;
margin: 0 auto;
text-align: center;
}
.header h2 {
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--color-gray-900);
line-height: 1.25;
}
.header p {
margin-top: 1rem;
font-size: 1rem;
line-height: 1.75;
color: var(--color-gray-600);
}
.faq-container {
max-width: 48rem;
margin: 3rem auto 0;
}
.faq-item {
padding: 1.5rem 0;
}
.faq-item + .faq-item {
border-top: 1px solid var(--color-gray-200);
}
.faq-button {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.faq-question {
font-size: 1rem;
font-weight: 600;
line-height: 1.75;
color: var(--color-gray-900);
}
.faq-icon-wrapper {
margin-left: 1.5rem;
height: 1.75rem;
display: flex;
align-items: center;
}
.faq-icon {
width: 1.5rem;
height: 1.5rem;
color: var(--color-gray-400);
transition: transform 0.2s ease;
}
.faq-icon.rotate {
transform: rotate(180deg);
}
.faq-answer {
margin-top: 0.5rem;
padding-right: 3rem;
font-size: 1rem;
line-height: 1.75;
color: var(--color-gray-600);
display: none;
}
.faq-answer.show {
display: block;
}
/* Responsive styles */
@media (min-width: 640px) {
.faq-section {
padding: 4rem 1.5rem;
}
.container {
padding: 0 1.5rem;
}
.header h2 {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.faq-section {
padding: 5rem 2rem;
}
.container {
padding: 0 2rem;
}
}
</style>
<section class="faq-section" aria-labelledby="faq-heading">
<div class="container">
<div class="header">
<h2 id="faq-heading">
Frequently Asked Questions
</h2>
<p>
Everything you need to know about our SaaS platform. Can't find the answer you're looking for? Feel free to contact our support team.
</p>
</div>
<div class="faq-container">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
How does your pricing model work?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" 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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
We offer flexible, usage-based pricing that scales with your business. Start with our free tier and upgrade as you grow. All plans include core features, with premium features available in higher tiers.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
What kind of support do you offer?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" 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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
We provide 24/7 email support for all customers. Premium plans include priority support with guaranteed response times and dedicated account managers. Our extensive documentation and community forums are available to everyone.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
Can I integrate with other tools?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" 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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
Yes! We offer robust API access and native integrations with popular tools like Slack, Google Workspace, and Microsoft 365. Our developer documentation makes it easy to build custom integrations.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false">
<span class="faq-question">
What about data security and privacy?
</span>
<span class="faq-icon-wrapper">
<svg class="faq-icon" 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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div class="faq-answer">
<p>
Security is our top priority. We're SOC 2 Type II certified and GDPR compliant. All data is encrypted at rest and in transit. We regularly conduct security audits and penetration testing to ensure your data stays safe.
</p>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const button = item.querySelector('.faq-button');
const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon');
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Toggle current item
button.setAttribute('aria-expanded', !isExpanded);
answer.classList.toggle('show');
icon.classList.toggle('rotate');
// Optional: Close other items
faqItems.forEach(otherItem => {
if (otherItem !== item) {
const otherButton = otherItem.querySelector('.faq-button');
const otherAnswer = otherItem.querySelector('.faq-answer');
const otherIcon = otherItem.querySelector('.faq-icon');
otherButton.setAttribute('aria-expanded', 'false');
otherAnswer.classList.remove('show');
otherIcon.classList.remove('rotate');
}
});
});
});
});
</script>
<!--
@type: FAQ
@industry: SaaS
@style: Minimal
@category: Content, Sale
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 sm:py-16 lg:py-20" aria-labelledby="faq-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 id="faq-heading" class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
Frequently Asked Questions
</h2>
<p class="mt-4 text-base leading-7 text-gray-600">
Everything you need to know about our SaaS platform. Can't find the answer you're looking for? Feel free to contact our support team.
</p>
</div>
<div class="mx-auto mt-12 max-w-3xl divide-y divide-gray-200">
<!-- FAQ Item 1 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
How does your pricing model work?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
We offer flexible, usage-based pricing that scales with your business. Start with our free tier and upgrade as you grow. All plans include core features, with premium features available in higher tiers.
</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
What kind of support do you offer?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
We provide 24/7 email support for all customers. Premium plans include priority support with guaranteed response times and dedicated account managers. Our extensive documentation and community forums are available to everyone.
</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
Can I integrate with other tools?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
Yes! We offer robust API access and native integrations with popular tools like Slack, Google Workspace, and Microsoft 365. Our developer documentation makes it easy to build custom integrations.
</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="py-6" x-data="{ open: false }">
<button
class="flex w-full items-start justify-between text-left"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<span class="text-base font-semibold leading-7 text-gray-900">
What about data security and privacy?
</span>
<span class="ml-6 flex h-7 items-center">
<svg
class="h-6 w-6 transform text-gray-400 transition-transform duration-200"
:class="{'rotate-180': open}"
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 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
<div
class="mt-2 pr-12"
x-show="open"
x-collapse
x-cloak
>
<p class="text-base leading-7 text-gray-600">
Security is our top priority. We're SOC 2 Type II certified and GDPR compliant. All data is encrypted at rest and in transit. We regularly conduct security audits and penetration testing to ensure your data stays safe.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Alpine.js for accordion functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<script>
// Add x-cloak styles to hide content before Alpine initializes
document.addEventListener('alpine:init', () => {
const style = document.createElement('style')
style.textContent = '[x-cloak] { display: none !important; }'
document.head.appendChild(style)
})
</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