Tailwind Svelte Assistant

# Bento Two-Row Dark Layout - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `bento-two-row-dark.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The original component creates a two-row bento grid on a dark background. ## Overview This component creates a bento grid layout with two rows, suitable for showcasing features or content blocks, specifically designed with a dark theme. The grid is based on a 6-column layout where items can span multiple columns. ## Original Svelte Component Props The original Svelte component defines the following props: - `mainTitle: string` (default: "Everything you need to deploy your app") - The main title. - `subTitle: string` (default: "Deploy faster") - A subtitle or accent text. - `items: Array<{ title: string, description: string, subCategory?: string, imageUrl?: string, imageAlt?: string, colSpan?: number, imageClasses?: string, textContainerClasses?: string }>` - An array of objects for grid items. - `colSpan`: Number of columns the item spans (in a 6-column base grid). - `imageClasses`, `textContainerClasses`: For custom styling of image and text containers within an item. ## Theme Variables Noted in Original Snippet The original snippet's comments mention these CSS theme variables for a dark theme: - `--theme-bg-base` (e.g., `bg-gray-900`) - `--theme-bg-alt` (e.g., `bg-gray-800`) - `--theme-text-base` (e.g., `text-white`) - `--theme-text-muted` (e.g., `text-gray-400`) - `--theme-primary` (e.g., `text-indigo-400`) - `--theme-border-color` (e.g., `ring-white/15`) - `--theme-border-radius-2xl` (e.g., `rounded-[2rem]`) ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component using its default props. The dynamic application of rounded corners based on item index (`i` in the Svelte `{#each}` loop) is crucial for the overall bento appearance. ```html <div class="bg-gray-900 py-24 sm:py-32"> <!-- theme: bg-theme-bg-base --> <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8"> <h2 class="text-base/7 font-semibold text-indigo-400">Deploy faster</h2> <!-- subTitle, theme: text-theme-primary --> <p class="mt-2 max-w-lg text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">Everything you need to deploy your app</p> <!-- mainTitle, theme: text-theme-text-base --> <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2"> <!-- Example Item 1 (index 0: col-span-4, top-left rounding) --> <div class="flex p-px lg:col-span-4"> <div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem]"> <!-- theme: bg-theme-bg-alt, ring-theme-border-color --> <img class="h-80 object-cover object-left" src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-releases.png" alt="Releases illustration" /> <div class="p-10"> <h3 class="text-sm/4 font-semibold text-gray-400">Releases</h3> <!-- theme: text-theme-text-muted --> <p class="mt-2 text-lg font-medium tracking-tight text-white">Push to deploy</p> <!-- theme: text-theme-text-base --> <p class="mt-2 max-w-lg text-sm/6 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida justo et nulla efficitur, maximus egestas sem pellentesque.</p> <!-- theme: text-theme-text-muted --> </div> </div> </div> <!-- Example Item 2 (index 1: col-span-2, top-right rounding) --> <div class="flex p-px lg:col-span-2"> <div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 lg:rounded-tr-[2rem]"> <img class="h-80 object-cover" src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-integrations.png" alt="Integrations illustration" /> <div class="p-10"> <h3 class="text-sm/4 font-semibold text-gray-400">Integrations</h3> <p class="mt-2 text-lg font-medium tracking-tight text-white">Connect your favorite tools</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400">Curabitur auctor, ex quis auctor venenatis, eros arcu rhoncus massa.</p> </div> </div> </div> <!-- Example Item 3 (index 2: col-span-2, bottom-left rounding) --> <div class="flex p-px lg:col-span-2"> <div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 lg:rounded-bl-[2rem]"> <img class="h-80 object-cover" src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-security.png" alt="Security illustration" /> <div class="p-10"> <h3 class="text-sm/4 font-semibold text-gray-400">Security</h3> <p class="mt-2 text-lg font-medium tracking-tight text-white">Advanced access control</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p> </div> </div> </div> <!-- Example Item 4 (index 3: col-span-4, bottom-right rounding) --> <div class="flex p-px lg:col-span-4"> <div class="overflow-hidden rounded-lg bg-gray-800 ring-1 ring-white/15 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"> <img class="h-80 object-cover object-left" src="https://tailwindcss.com/plus-assets/img/component-images/bento-02-performance.png" alt="Performance illustration" /> <div class="p-10"> <h3 class="text-sm/4 font-semibold text-gray-400">Performance</h3> <p class="mt-2 text-lg font-medium tracking-tight text-white">Lightning-fast builds</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-400">Sed congue eros non finibus molestie. Vestibulum euismod augue vel commodo vulputate. Maecenas at augue sed elit dictum vulputate.</p> </div> </div> </div> </div> </div> </div> ``` ## JavaScript Notes - The original Svelte component dynamically generates grid items based on the `items` prop array. - Conditional classes for rounded corners (`max-lg:rounded-t-[2rem]`, `lg:rounded-tl-[2rem]`, etc.) are applied based on the item's index (`i`) in the loop to create the overall bento box shape. This logic would need to be replicated manually or server-side for static HTML. - `colSpan` property on items determines how many columns they span in the `lg:grid-cols-6` layout. ## CSS Notes - **Themeable:** The component is designed for a dark theme, with comments indicating where theme variables like `--theme-bg-base`, `--theme-text-primary`, etc., would apply. - **Rounded Corners:** Specific large radius rounding (e.g., `rounded-t-[2rem]`) is used, which might rely on Tailwind's JIT mode for arbitrary values or pre-defined theme values for `2rem`. This Markdown file provides an HTML structure and class details based on the `bento-two-row-dark.svelte` snippet.