Component:
Faq Business Modern
Colors:
Description:
This carefully crafted FAQ 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: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--slate-50: #f8fafc;
--slate-200: #e2e8f0;
--slate-500: #64748b;
--slate-600: #475569;
--slate-900: #0f172a;
}
/* 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(--slate-50);
padding: 4rem 1rem;
}
.faq-wrapper {
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
}
.faq-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: var(--slate-900);
margin-bottom: 2rem;
text-align: center;
}
.faq-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.faq-item {
border-bottom: 1px solid var(--slate-200);
padding-bottom: 1.5rem;
}
.faq-item:last-child {
border-bottom: none;
padding-bottom: 0.5rem;
}
.faq-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.faq-button:focus {
outline: none;
}
.faq-question {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
color: var(--slate-900);
}
.faq-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--slate-500);
transition: transform 0.2s ease;
}
.faq-content {
margin-top: 0.75rem;
display: none;
}
.faq-answer {
color: var(--slate-600);
}
/* Responsive breakpoints */
@media (min-width: 768px) {
.faq-section {
padding: 6rem 1.5rem;
}
}
</style>
<section class="faq-section">
<div>
<div class="faq-wrapper">
<h3 class="faq-title">Frequently asked questions</h3>
<div class="faq-items">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-1">
<h4 class="faq-question">Can I change plans later?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-1" class="faq-content">
<p class="faq-answer">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-2">
<h4 class="faq-question">What payment methods do you accept?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-2" class="faq-content">
<p class="faq-answer">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-3">
<h4 class="faq-question">Do you offer a free trial?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-3" class="faq-content">
<p class="faq-answer">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button class="faq-button" aria-expanded="false" aria-controls="faq-4">
<h4 class="faq-question">What's your refund policy?</h4>
<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-4" class="faq-content">
<p class="faq-answer">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
</div>
</div>
</div>
</div>
</div>
<script>
// FAQ accordion functionality
document.querySelectorAll('.faq-button').forEach(button => {
button.addEventListener('click', () => {
const content = document.getElementById(button.getAttribute('aria-controls'));
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
content.style.display = !isExpanded ? 'block' : 'none';
// Rotate the icon
const icon = button.querySelector('svg');
icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
});
});
</script>
</section>
<!--
@type: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-16 md:py-24">
<div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
<div class="max-w-3xl mx-auto">
<h3 class="text-2xl font-bold text-slate-900 mb-8 text-center">Frequently asked questions</h3>
<div class="space-y-6">
<!-- FAQ Item 1 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-1">
<h4 class="text-lg font-medium text-slate-900">Can I change plans later?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-1" class="mt-3 hidden">
<p class="text-slate-600">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-2">
<h4 class="text-lg font-medium text-slate-900">What payment methods do you accept?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-2" class="mt-3 hidden">
<p class="text-slate-600">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="border-b border-slate-200 pb-6">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-3">
<h4 class="text-lg font-medium text-slate-900">Do you offer a free trial?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-3" class="mt-3 hidden">
<p class="text-slate-600">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="pb-2">
<button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-4">
<h4 class="text-lg font-medium text-slate-900">What's your refund policy?</h4>
<svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div id="faq-4" class="mt-3 hidden">
<p class="text-slate-600">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
</div>
</div>
</div>
</div>
</div>
<script>
// FAQ accordion functionality
document.querySelectorAll('[aria-controls^="faq-"]').forEach(button => {
button.addEventListener('click', () => {
const content = document.getElementById(button.getAttribute('aria-controls'));
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
content.classList.toggle('hidden');
// Rotate the icon
const icon = button.querySelector('svg');
icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
icon.style.transition = 'transform 0.2s ease';
});
});
</script>
</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