Component:
Free Faq Product Light
Tailwind
Tailwind
React
Vue
Svelte
Astro
HTML / CSS
Colors:
Description:
This carefully crafted FAQ component is perfect for Product landing pages, featuring a Light 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: Product
@style: Light
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-300: #93c5fd;
--color-blue-600: #2563eb;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
--content-max-width: 48rem; /* max-w-3xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.faq-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) var(--spacing-4);
}
.faq-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.faq-header {
max-width: var(--content-max-width);
margin: 0 auto;
text-align: center;
margin-bottom: var(--spacing-16);
}
.faq-label {
color: var(--color-blue-600);
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.faq-title {
margin-top: var(--spacing-2);
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
}
.faq-description {
margin-top: var(--spacing-4);
font-size: 1.125rem;
color: var(--color-gray-600);
font-weight: 400;
}
.faq-content {
max-width: var(--content-max-width);
margin: 0 auto;
}
.faq-item {
margin-bottom: var(--spacing-6);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.faq-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
background: none;
border: none;
padding: 0;
cursor: pointer;
border-radius: 0.5rem;
}
.faq-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-100);
}
.faq-question {
font-size: 1.125rem;
font-weight: 400;
color: var(--color-gray-800);
}
.faq-icon {
margin-left: var(--spacing-4);
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
color: var(--color-blue-600);
transition: transform 0.3s ease;
}
.faq-icon.open {
transform: rotate(180deg);
}
.faq-answer {
margin-top: var(--spacing-4);
color: var(--color-gray-600);
font-weight: 400;
display: none;
}
.faq-answer.open {
display: block;
}
.faq-cta {
margin-top: var(--spacing-12);
text-align: center;
}
.cta-text {
color: var(--color-gray-600);
margin-bottom: var(--spacing-6);
font-weight: 400;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
text-decoration: none;
font-weight: 400;
}
.cta-button:hover {
background-color: var(--color-gray-50);
}
.cta-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: var(--spacing-2);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.faq-section {
padding: var(--spacing-20) var(--spacing-6);
}
.faq-title {
font-size: 2.25rem;
}
.faq-question {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.faq-section {
padding: var(--spacing-24) var(--spacing-8);
}
}
</style>
<section class="faq-section" aria-labelledby="faq-heading">
<div class="faq-container">
<!-- Section Header -->
<div class="faq-header">
<span class="faq-label">Support</span>
<h2 id="faq-heading" class="faq-title">Frequently Asked Questions</h2>
<p class="faq-description">Everything you need to know about our product. Can't find what you're looking for? Reach out to our customer support team.</p>
</div>
<!-- FAQ Container -->
<div class="faq-content">
<!-- FAQ Item 1 -->
<div class="faq-item">
<button
class="faq-button"
aria-expanded="false"
onclick="toggleFAQ(this)"
>
<h3 class="faq-question">What materials are used in your products?</h3>
<svg
class="faq-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="faq-answer">
<p>We source only the highest quality, sustainable materials for our products. Each item is crafted using premium-grade components that undergo rigorous testing for durability and performance. Our commitment to sustainability means we prioritize recycled and renewable materials whenever possible, without compromising on quality or functionality.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="faq-item">
<button
class="faq-button"
aria-expanded="false"
onclick="toggleFAQ(this)"
>
<h3 class="faq-question">What is your warranty policy?</h3>
<svg
class="faq-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="faq-answer">
<p>All our products come with a comprehensive 2-year warranty that covers manufacturing defects and material failures under normal use conditions. For premium product lines, we offer an extended 5-year warranty option. Our warranty process is simple and customer-friendly—just contact our support team with your order details, and we'll guide you through the next steps.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="faq-item">
<button
class="faq-button"
aria-expanded="false"
onclick="toggleFAQ(this)"
>
<h3 class="faq-question">How do I track my order?</h3>
<svg
class="faq-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="faq-answer">
<p>Tracking your order is easy. Once your purchase is confirmed, you'll receive an order confirmation email containing your tracking number and a direct link to monitor your shipment's progress. You can also log into your account on our website and view real-time updates in the "Order History" section. Our system integrates with all major shipping carriers to provide accurate delivery estimates.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="faq-item">
<button
class="faq-button"
aria-expanded="false"
onclick="toggleFAQ(this)"
>
<h3 class="faq-question">What is your return policy?</h3>
<svg
class="faq-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="faq-answer">
<p>We offer a hassle-free 30-day return policy on all unused products in their original packaging. If you're not completely satisfied with your purchase, simply initiate a return through your account or contact our customer service team. Once we receive and inspect the returned item, we'll process your refund within 3-5 business days. Please note that customized products may have different return conditions.</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="faq-item">
<button
class="faq-button"
aria-expanded="false"
onclick="toggleFAQ(this)"
>
<h3 class="faq-question">Do you ship internationally?</h3>
<svg
class="faq-icon"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="faq-answer">
<p>Yes, we ship to over 90 countries worldwide. International shipping rates and delivery times vary by location. During checkout, you'll see the shipping options available for your country, including estimated delivery times and any applicable customs fees or import duties. We partner with reliable global carriers to ensure your products arrive safely and on time, no matter where you are.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="faq-cta">
<p class="cta-text">Still have questions? Our support team is here to help.</p>
<a href="#contact" class="cta-button">
Contact Support
<svg class="cta-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</section>
<script>
function toggleFAQ(button) {
const item = button.parentElement;
const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon');
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Close all other FAQs
document.querySelectorAll('.faq-answer.open').forEach(el => {
if (el !== answer) {
el.classList.remove('open');
el.previousElementSibling.setAttribute('aria-expanded', 'false');
el.previousElementSibling.querySelector('.faq-icon').classList.remove('open');
}
});
// Toggle current FAQ
answer.classList.toggle('open');
icon.classList.toggle('open');
button.setAttribute('aria-expanded', !isExpanded);
}
</script>
<!--
@type: FAQ
@industry: Product
@style: Light
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 sm:py-20 lg: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="max-w-3xl mx-auto text-center mb-16">
<span class="text-blue-600 font-medium text-sm uppercase tracking-wider">Support</span>
<h2 id="faq-heading" class="mt-2 text-3xl font-medium text-gray-800 sm:text-4xl">Frequently Asked Questions</h2>
<p class="mt-4 text-lg text-gray-600 font-normal">Everything you need to know about our product. Can't find what you're looking for? Reach out to our customer support team.</p>
</div>
<!-- FAQ Container -->
<div class="max-w-3xl mx-auto">
<!-- FAQ Item 1 -->
<div class="mb-6 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm" x-data="{ open: false }">
<button
class="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-blue-100 rounded-lg"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg sm:text-xl font-normal text-gray-800">What materials are used in your products?</h3>
<span class="ml-4 flex-shrink-0">
<svg
class="h-6 w-6 text-blue-600 transform transition-transform duration-300"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
<div
class="mt-4 text-gray-600 font-normal"
x-show="open"
x-collapse
x-cloak
>
<p>We source only the highest quality, sustainable materials for our products. Each item is crafted using premium-grade components that undergo rigorous testing for durability and performance. Our commitment to sustainability means we prioritize recycled and renewable materials whenever possible, without compromising on quality or functionality.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="mb-6 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm" x-data="{ open: false }">
<button
class="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-blue-100 rounded-lg"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg sm:text-xl font-normal text-gray-800">What is your warranty policy?</h3>
<span class="ml-4 flex-shrink-0">
<svg
class="h-6 w-6 text-blue-600 transform transition-transform duration-300"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
<div
class="mt-4 text-gray-600 font-normal"
x-show="open"
x-collapse
x-cloak
>
<p>All our products come with a comprehensive 2-year warranty that covers manufacturing defects and material failures under normal use conditions. For premium product lines, we offer an extended 5-year warranty option. Our warranty process is simple and customer-friendly—just contact our support team with your order details, and we'll guide you through the next steps.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="mb-6 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm" x-data="{ open: false }">
<button
class="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-blue-100 rounded-lg"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg sm:text-xl font-normal text-gray-800">How do I track my order?</h3>
<span class="ml-4 flex-shrink-0">
<svg
class="h-6 w-6 text-blue-600 transform transition-transform duration-300"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
<div
class="mt-4 text-gray-600 font-normal"
x-show="open"
x-collapse
x-cloak
>
<p>Tracking your order is easy. Once your purchase is confirmed, you'll receive an order confirmation email containing your tracking number and a direct link to monitor your shipment's progress. You can also log into your account on our website and view real-time updates in the "Order History" section. Our system integrates with all major shipping carriers to provide accurate delivery estimates.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="mb-6 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm" x-data="{ open: false }">
<button
class="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-blue-100 rounded-lg"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg sm:text-xl font-normal text-gray-800">What is your return policy?</h3>
<span class="ml-4 flex-shrink-0">
<svg
class="h-6 w-6 text-blue-600 transform transition-transform duration-300"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
<div
class="mt-4 text-gray-600 font-normal"
x-show="open"
x-collapse
x-cloak
>
<p>We offer a hassle-free 30-day return policy on all unused products in their original packaging. If you're not completely satisfied with your purchase, simply initiate a return through your account or contact our customer service team. Once we receive and inspect the returned item, we'll process your refund within 3-5 business days. Please note that customized products may have different return conditions.</p>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="mb-6 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm" x-data="{ open: false }">
<button
class="w-full flex items-center justify-between text-left focus:outline-none focus:ring-2 focus:ring-blue-100 rounded-lg"
@click="open = !open"
aria-expanded="false"
:aria-expanded="open.toString()"
>
<h3 class="text-lg sm:text-xl font-normal text-gray-800">Do you ship internationally?</h3>
<span class="ml-4 flex-shrink-0">
<svg
class="h-6 w-6 text-blue-600 transform transition-transform duration-300"
:class="{'rotate-180': open}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</span>
</button>
<div
class="mt-4 text-gray-600 font-normal"
x-show="open"
x-collapse
x-cloak
>
<p>Yes, we ship to over 90 countries worldwide. International shipping rates and delivery times vary by location. During checkout, you'll see the shipping options available for your country, including estimated delivery times and any applicable customs fees or import duties. We partner with reliable global carriers to ensure your products arrive safely and on time, no matter where you are.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 text-center">
<p class="text-gray-600 mb-6 font-normal">Still have questions? Our support team is here to help.</p>
<a href="#contact" class="inline-flex items-center justify-center px-6 py-3 bg-white border border-blue-300 text-gray-800 rounded-lg hover:bg-gray-50 shadow-sm transition-all duration-200 font-normal">
Contact Support
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Alpine.js for accordion functionality -->
<script src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add x-cloak styles to hide content before Alpine initializes
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
Unlock for $49
(one-time payment)Early bird discount. Lock in this price forever
Premium components
Get access to all pro 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