Tailwind Svelte Assistant

# FAQ Section with Three-Column Layout - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `faq-three-column.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays FAQs in a responsive three-column grid. ## Overview This component creates an FAQ section where questions and answers are arranged in a three-column layout on larger screens. It includes a main title and an introductory description that can contain HTML for links. ## Original Svelte Component Props - `title: string` (default: "Frequently asked questions") - The main title for the FAQ section. - `description: string` (default: "Have a different question... <a href='...' class='...'>sending us an email</a>...") - A short description, can include HTML. - `faqs: Array<{ question: string, answer: string }>` - An array of FAQ objects. ## Theme Variables Noted in Original Snippet - `--theme-bg-base` (e.g., `bg-white`) - `--theme-text-base` (e.g., `text-gray-900`) - `--theme-text-muted` (e.g., `text-gray-600`) - `--theme-primary` (e.g., `text-indigo-600` for links in description) - `--theme-primary-hover` (e.g., `hover:text-indigo-500` for links in description) - `--theme-border-color` (e.g., `border-gray-900/10` - though not directly used for dividers in this version, could be for overall section border if added) ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component using its default props. ```html <div class="bg-white"> <!-- theme: bg-theme-bg-base --> <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8"> <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2> <!-- title prop, theme: text-theme-text-base --> <p class="mt-6 max-w-2xl text-base/7 text-gray-600">Have a different question and can’t find the answer you’re looking for? Reach out to our support team by <a href='#' class='font-semibold text-indigo-600 hover:text-indigo-500'>sending us an email</a> and we’ll get back to you as soon as we can.</p> <!-- description prop (HTML rendered), theme: text-theme-text-muted, link text-theme-primary --> <div class="mt-20"> <dl class="space-y-16 sm:grid sm:grid-cols-2 sm:space-y-0 sm:gap-x-6 sm:gap-y-16 lg:grid-cols-3 lg:gap-x-10"> <!-- Example FAQ Item --> <div> <dt class="text-base/7 font-semibold text-gray-900">What's the best thing about Switzerland?</dt> <!-- faq.question, theme: text-theme-text-base --> <dd class="mt-2 text-base/7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd> <!-- faq.answer (HTML rendered), theme: text-theme-text-muted --> </div> <!-- Another Example FAQ Item --> <div> <dt class="text-base/7 font-semibold text-gray-900">How do you make holy water?</dt> <dd class="mt-2 text-base/7 text-gray-600">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd> </div> <!-- More FAQ items would be generated here by the Svelte #each block (up to 6 for 3x2 grid) --> </dl> </div> </div> </div> ``` ## JavaScript Notes - The Svelte component uses the `faqs` prop (an array of objects) to dynamically generate each question-answer pair. - The `description` prop can contain HTML, which is rendered using Svelte's `{@html ...}` directive. - For static HTML, content would be hardcoded. ## CSS Notes - **Layout:** Uses a CSS Grid (`sm:grid-cols-2`, `lg:grid-cols-3`) for the multi-column layout on different screen sizes. - **Spacing:** `space-y-16` on the `<dl>` provides vertical spacing between rows of FAQs on small screens, while `gap-x-6 sm:gap-y-16 lg:gap-x-10` handles grid gaps on larger screens. - **Themeable Classes:** Comments indicate where theme variables could be applied. This Markdown file provides an HTML structure and class details based on the `faq-three-column.svelte` snippet.