Tailwind Svelte Assistant

# FAQ Section with Offset Supporting Column - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `faq-offset-supporting-column.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays FAQs in a two-column layout. ## Overview This component creates an FAQ section with a two-column layout. One column (typically narrower) contains a main title and a supporting description (which can include a link). The other column (typically wider) lists the questions and answers. ## Original Svelte Component Props - `mainTitle: string` (default: "Frequently asked questions") - The main title, usually displayed in the supporting column. - `supportingDescription: string` (default: "Can’t find the answer... Reach out to our <a href='#' class='font-semibold text-indigo-600 hover:text-indigo-500'>customer support</a> team.") - Description in the supporting column, can contain HTML. - `faqs: Array<{ question: string, answer: string }>` - An array of FAQ objects. *Note: The original component comments also mention `supportingTitle`, `supportingLinkText`, and `supportingLinkHref` as potential props, but they are not exported or used in the provided Svelte script.* ## 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) - `--theme-primary-hover` (e.g., `hover:text-indigo-500` for links) - `--theme-border-color` (Not directly used with `divide-y` in this version, but could be for other borders) ## 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-24 sm:pt-32 lg:px-8 lg:py-40"> <div class="lg:grid lg:grid-cols-12 lg:gap-8"> <!-- Supporting Column (Left) --> <div class="lg:col-span-5"> <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900">Frequently asked questions</h2> <!-- mainTitle prop, theme: text-theme-text-base --> <p class="mt-4 text-base/7 text-pretty text-gray-600">Can’t find the answer you’re looking for? Reach out to our <a href='#' class='font-semibold text-indigo-600 hover:text-indigo-500'>customer support</a> team.</p> <!-- supportingDescription prop (HTML rendered), theme: text-theme-text-muted, link text-theme-primary --> </div> <!-- FAQs Column (Right) --> <div class="mt-10 lg:col-span-7 lg:mt-0"> <dl class="space-y-10"> <!-- Example FAQ Item --> <div> <dt class="text-base/7 font-semibold text-gray-900">How do you make holy water?</dt> <!-- faq.question, theme: text-theme-text-base --> <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> <!-- 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">What's the best thing about Switzerland?</dt> <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> </div> <!-- More FAQ items would be generated here by the Svelte #each block --> </dl> </div> </div> </div> </div> ``` ## JavaScript Notes - The Svelte component uses the `faqs` prop (an array of objects) to dynamically generate each question-answer pair. - The `supportingDescription` prop can contain HTML, which is rendered using Svelte's `{@html ...}` directive. Care should be taken with HTML injection if the content is user-supplied. - For static HTML, content would be hardcoded. ## CSS Notes - **Layout:** Uses a CSS Grid (`lg:grid-cols-12`) for the two-column layout on large screens. - **Spacing:** `space-y-10` is used on the `<dl>` to space out the FAQ items. - **Themeable Classes:** Comments indicate where theme variables could be applied. This Markdown file provides an HTML structure and class details based on the `faq-offset-supporting-column.svelte` snippet.