Tailwind Svelte Assistant

# Simple Contact Form with Background Pattern - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `contact-simple-bg-pattern.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays a contact form with an optional decorative background pattern. ## Overview This component creates a contact section with a title, description, and a form. The form fields are configurable, and it includes an optional decorative SVG background pattern. ## Original Svelte Component Props - `title: string` (default: "Contact sales") - `description: string` (default: "Aute magna irure deserunt veniam aliqua magna enim voluptate.") - `formFields: Array<{ id: string, name: string, label: string, type: string, autocomplete?: string, isTextarea?: boolean, rows?: number, colSpan?: number, countrySelect?: Array<{value: string, label: string}> }>` - Configures form fields. - `agreementText: string` (default: "By selecting this, you agree to our <a href='#' class='font-semibold text-indigo-600'>privacy&nbsp;policy</a>.") - `submitButtonText: string` (default: "Let's talk") - `showDecorativePattern: boolean` (default: true) ## 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`, `bg-indigo-600`) - `--theme-primary-hover` (e.g., `hover:bg-indigo-500`) - `--theme-input-border` (e.g., `outline-gray-300`) - `--theme-input-focus-ring` (e.g., `focus:outline-indigo-600`) - `--theme-border-radius-md` (e.g., `rounded-md`) - `--theme-switch-bg-enabled` (e.g., `bg-indigo-600`) - `--theme-switch-bg-disabled` (e.g., `bg-gray-200`) - `--theme-switch-thumb-bg` (e.g., `bg-white`) - `--theme-pattern-fill` (Not directly used, but pattern has `from-[#ff80b5] to-[#9089fc]`) ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component with default props. Form submission and data handling require JavaScript. ```html <div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8"> <!-- theme: bg-theme-bg-base --> <!-- Optional Decorative Background Pattern --> <div class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]" aria-hidden="true"> <div class="relative left-1/2 -z-10 aspect-1155/678 w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div> </div> <div class="mx-auto max-w-2xl text-center"> <h2 class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">Contact sales</h2> <!-- title prop, theme: text-theme-text-base --> <p class="mt-2 text-lg/8 text-gray-600">Aute magna irure deserunt veniam aliqua magna enim voluptate.</p> <!-- description prop, theme: text-theme-text-muted --> </div> <form action="#" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20"> <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2"> <!-- Example: First Name --> <div> <label for="first-name" class="block text-sm/6 font-semibold text-gray-900">First name</label> <div class="mt-2.5"> <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"> </div> </div> <!-- Example: Last Name --> <div> <label for="last-name" class="block text-sm/6 font-semibold text-gray-900">Last name</label> <div class="mt-2.5"> <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"> </div> </div> <!-- Example: Company (col-span-2) --> <div class="sm:col-span-2"> <label for="company" class="block text-sm/6 font-semibold text-gray-900">Company</label> <div class="mt-2.5"> <input type="text" name="company" id="company" autocomplete="organization" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"> </div> </div> <!-- Example: Phone Number with Country Select (col-span-2) --> <div class="sm:col-span-2"> <label for="phone-number" class="block text-sm/6 font-semibold text-gray-900">Phone number</label> <div class="mt-2.5"> <div class="flex rounded-md bg-white outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600"> <div class="grid shrink-0 grid-cols-1 focus-within:relative"> <select id="phone-number-country" name="phone-number-country" autocomplete="country" aria-label="Country" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-7 pl-3.5 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"> <option value="US">US</option> <option value="CA">CA</option> <option value="EU">EU</option> </select> <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg> </div> <input type="tel" name="phone-number" id="phone-number" autocomplete="tel" class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"> </div> </div> </div> <!-- Example: Message Textarea (col-span-2) --> <div class="sm:col-span-2"> <label for="message" class="block text-sm/6 font-semibold text-gray-900">Message</label> <div class="mt-2.5"> <textarea name="message" id="message" rows="4" class="block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"></textarea> </div> </div> <!-- Agreement Switch --> <div class="flex gap-x-4 sm:col-span-2"> <div class="flex h-6 items-center"> <button type="button" class="flex w-8 flex-none cursor-pointer rounded-full p-px ring-1 ring-gray-900/5 transition-colors duration-200 ease-in-out ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 bg-gray-200" role="switch" aria-checked="false" aria-labelledby="switch-policy-label" > <!-- theme: switch bg (bg-gray-200 or bg-indigo-600) --> <span class="sr-only">Agree to policies</span> <span aria-hidden="true" class="size-4 transform rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition duration-200 ease-in-out translate-x-0"></span> <!-- theme: switch thumb, translate-x based on state --> </button> </div> <label class="text-sm/6 text-gray-600" id="switch-policy-label">By selecting this, you agree to our <a href='#' class='font-semibold text-indigo-600'>privacy&nbsp;policy</a>.</label> <!-- theme: text-theme-text-muted, link text-theme-primary --> </div> </div> <div class="mt-10"> <button type="submit" class="block w-full rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Let's talk</button> <!-- theme: button primary --> </div> </form> </div> ``` ## JavaScript Notes - The Svelte component uses the `formFields` prop to dynamically generate form inputs. - Data binding (`bind:value`) is used for form fields and the agreement switch. - A `handleSubmit` function is present (though it only logs to console in the snippet). - For static HTML, form fields would be hardcoded, and submission would require backend logic. ## CSS Notes - **Background Pattern:** An optional SVG pattern with `blur-3xl` and `clip-path` is used for decoration. - **Input Styling:** Inputs, textarea, and select use specific outline and focus styles, intended to be themeable. - **Switch:** A custom-styled switch is used for the agreement, with classes changing based on its state. - **Themeable Classes:** Comments indicate where theme variables could be applied. This Markdown file provides an HTML structure and class details based on the `contact-simple-bg-pattern.svelte` snippet.