FAQ section inside a card
Category: FAQ
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FAQ Component Recreate</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.faq-transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-bg': 'rgb(216, 223, 229)',
'brand-surface': 'rgb(246, 251, 255)',
'text-primary': 'rgb(14, 28, 41)',
'tag-bg': 'rgba(240, 248, 255, 0.9)',
},
fontFamily: {
'primary': ['"Plus Jakarta Sans"', 'sans-serif'],
'secondary': ['Inter', 'sans-serif'],
},
boxShadow: {
'faq': '0 0.7px 0.7px -0.3px rgba(16, 49, 77, 0.055), 0 1.8px 1.8px -0.6px rgba(16, 49, 77, 0.055), 0 3.6px 3.6px -0.9px rgba(16, 49, 77, 0.06), 0 6.9px 6.9px -1.2px rgba(16, 49, 77, 0.063), 0 13.6px 13.6px -1.5px rgba(16, 49, 77, 0.075), 0 30px 30px -1.75px rgba(16, 49, 77, 0.098)',
}
}
},
plugins: [],
}</script></head>
<body id="app-root" class="bg-gray-100 flex items-center justify-center min-h-screen">
<main class="w-full"><section class="max-w-[1200px] mx-auto bg-brand-bg rounded-[20px] p-[100px_40px] flex flex-col items-center justify-center gap-[32px] overflow-hidden font-secondary text-text-primary">
<!-- Heading Container -->
<div class="max-w-[1120px] flex flex-col items-center gap-[44px] z-10 w-full">
<div class="max-w-[640px] flex flex-col items-center gap-[16px] w-full">
<!-- Tag -->
<div class="flex items-center justify-center gap-[8px] px-[12px] py-[2px] rounded-[60px] bg-tag-bg border border-brand-bg shadow-[0_0_0_2px_rgba(240,248,255,0.9)]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[17px] h-[17px] fill-text-primary opacity-80">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z"></path>
</svg>
<span class="text-[14px] leading-[22.4px]">Your Queries, Simplified</span>
</div>
<!-- Title & Subtitle -->
<div class="text-center">
<h2 class="font-primary text-[56px] leading-[67.2px] tracking-[-0.56px] mb-4">
Questions? Answers!
</h2>
<p class="text-[16px] leading-[24px] opacity-100">
Find quick answers to the most common questions about our platform
</p>
</div>
</div>
<!-- FAQ List -->
<div class="flex flex-col gap-[16px] w-full max-w-[600px] z-10">
<!-- FAQ Item 1 -->
<div data-faq-item="" class="group cursor-pointer bg-brand-surface rounded-[10px] shadow-faq overflow-hidden faq-transition">
<div class="p-[12px_16px] flex items-center justify-between gap-4">
<p class="text-[16px] font-secondary leading-[24px]">What is Alter ?</p>
<div data-faq-icon="" class="faq-transition">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[20px] h-[20px] fill-text-primary">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
</div>
</div>
<div data-faq-content="" class="hidden px-4 pb-4 animate-on-scroll-visible">
<p class="text-[14px] leading-[22.4px] text-text-primary/80">Alter is a Framer template designed to help you build professional, enterprise-ready AI agent websites quickly and efficiently.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div data-faq-item="" class="group cursor-pointer bg-brand-surface rounded-[10px] shadow-faq overflow-hidden faq-transition">
<div class="p-[12px_16px] flex items-center justify-between gap-4">
<p class="text-[16px] font-secondary leading-[24px]">Is Alter optimized for SEO ?</p>
<div data-faq-icon="" class="faq-transition">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[20px] h-[20px] fill-text-primary">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
</div>
</div>
<div data-faq-content="" class="hidden px-4 pb-4">
<p class="text-[14px] leading-[22.4px] text-text-primary/80">Yes, Alter is built with SEO-friendly practices to help your website rank better on search engines.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div data-faq-item="" class="group cursor-pointer bg-brand-surface rounded-[10px] shadow-faq overflow-hidden faq-transition">
<div class="p-[12px_16px] flex items-center justify-between gap-4">
<p class="text-[16px] font-secondary leading-[24px]">Do I need coding skills to use Alter ?</p>
<div data-faq-icon="" class="faq-transition">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[20px] h-[20px] fill-text-primary">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
</div>
</div>
<div data-faq-content="" class="hidden px-4 pb-4">
<p class="text-[14px] leading-[22.4px] text-text-primary/80">No! Alter is built for designers and non-technical users. Framer's intuitive interface allows you to customize without writing code.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div data-faq-item="" class="group cursor-pointer bg-brand-surface rounded-[10px] shadow-faq overflow-hidden faq-transition">
<div class="p-[12px_16px] flex items-center justify-between gap-4">
<p class="text-[16px] font-secondary leading-[24px]">Can I customize Alter to fit my brand ?</p>
<div data-faq-icon="" class="faq-transition">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[20px] h-[20px] fill-text-primary">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path>
</svg>
</div>
</div>
<div data-faq-content="" class="hidden px-4 pb-4">
<p class="text-[14px] leading-[22.4px] text-text-primary/80">Absolutely. Alter offers flexible customization options, including fonts, colors, layouts, and more, to match your brand identity.</p>
</div>
</div>
</div>
<!-- Contact Footer -->
<div class="flex items-center justify-center gap-[8px] mt-4 opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-[25px] h-[25px] fill-text-primary">
<path d="M228.44,89.34l-96-64a8,8,0,0,0-8.88,0l-96,64A8,8,0,0,0,24,96V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V96A8,8,0,0,0,228.44,89.34ZM96.72,152,40,192V111.53Zm16.37,8h29.82l56.63,40H56.46Zm46.19-8L216,111.53V192ZM128,41.61l81.91,54.61-67,47.78H113.11l-67-47.78Z"></path>
</svg>
<p class="text-[16px] leading-[24px]">Feel free to mail us for any enquiries : <span class="font-medium">alter@support.com</span></p>
</div>
</div>
</section></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Toggle logic for FAQ items
document.querySelectorAll('[data-faq-item]').forEach(item => {
item.addEventListener('click', () => {
const content = item.querySelector('[data-faq-content]');
const icon = item.querySelector('[data-faq-icon]');
const isOpen = !content.classList.contains('hidden');
// Close all others
document.querySelectorAll('[data-faq-content]').forEach(c => c.classList.add('hidden'));
document.querySelectorAll('[data-faq-icon]').forEach(i => i.style.transform = 'rotate(0deg)');
if (!isOpen) {
content.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
}
});
});
});
</script>
</body></html>
create the faq section, change the content
Created by: LandingHero
