Tailwind Svelte Assistant

# Bento Three-Column Layout - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `bento-three-column.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The original component is designed for a three-column, two-row bento grid. ## Overview This component creates a bento grid layout, typically used to showcase multiple features or content blocks in a visually engaging way. The example below is based on a 3-column, 2-row configuration with some items spanning multiple rows. ## 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 above the grid. - `subTitle: string` (default: "Deploy faster") - A smaller text above the main title (referred to as `accentText` in some comments). - `accentText: string` (default: "Deploy faster") - Similar to `subTitle`. - `items: Array<{ title: string, description: string, imageUrl?: string, imageAlt?: string, isLargeRow?: boolean, contentSpecificClasses?: string, imageContainerClasses?: string, textContainerClasses?: string, codeContent?: string, codeLang?: string }>` - An array of objects, each representing an item in the bento grid. - `isLargeRow`: If true, the item spans two rows. - `codeContent`, `codeLang`: For displaying code snippets within a bento item. ## Theme Variables Noted in Original Snippet The original snippet's comments mention these CSS theme variables, suggesting they might be used or intended for use: - `--theme-bg-base` (e.g., `bg-gray-50`) - `--theme-bg-alt` (e.g., `bg-white`) - `--theme-text-base` (e.g., `text-gray-950`) - `--theme-text-muted` (e.g., `text-gray-600`) - `--theme-primary` (e.g., `text-indigo-600`) - `--theme-border-color` (e.g., `ring-black/5`) - `--theme-border-radius-lg` (e.g., `rounded-lg`) - `--radius-lg` (CSS var for `rounded-lg`) - `--radius-2xl` (CSS var for `rounded-2xl`) The HTML example below uses direct Tailwind classes but notes where these theme variables might apply. It also uses `calc(var(--radius-lg)+1px)` which implies CSS variables like `--radius-lg` should be defined (e.g., `:root { --radius-lg: 0.5rem; }`). ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component with its default props. ```html <div class="bg-gray-50 py-24 sm:py-32"> <!-- Outer container, themeable: bg-theme-bg-base --> <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8"> <h2 class="text-center text-base/7 font-semibold text-indigo-600">Deploy faster</h2> <!-- subTitle, themeable: text-theme-primary --> <p class="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-950 sm:text-5xl">Everything you need to deploy your app</p> <!-- mainTitle, themeable: text-theme-text-base --> <div class="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2"> <!-- Item 1 (Large Row, Col 1 - Example with Image) --> <div class="relative lg:row-span-2"> <div class="absolute inset-px rounded-lg bg-white lg:rounded-l-[2rem]"></div> <!-- themeable: bg-theme-bg-alt --> <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(var(--radius-2xl)+1px)]"> <div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0"> <!-- textContainerClasses --> <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Mobile friendly</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.</p> </div> <div class="relative min-h-[30rem] w-full grow max-lg:mx-auto max-lg:max-w-sm"> <!-- imageContainerClasses --> <div class="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 shadow-2xl"> <img class="size-full object-cover object-top" src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png" alt="Mobile friendly design example" /> </div> </div> </div> <div class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 lg:rounded-l-[2rem]"></div> <!-- themeable: ring-theme-border-color --> </div> <!-- Item 2 (Small, Col 2, Row 1 - Example with Image) --> <div class="relative max-lg:row-start-1"> <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"></div> <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(var(--radius-2xl)+1px)]"> <div class="px-8 pt-8 sm:px-10 sm:pt-10"> <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Performance</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit maiores impedit.</p> </div> <div class="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2"> <img class="w-full max-lg:max-w-xs" src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-performance.png" alt="Performance illustration" /> </div> </div> <div class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-t-[2rem]"></div> </div> <!-- Item 3 (Small, Col 2, Row 2 - Example with Image) --> <div class="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"> <div class="absolute inset-px rounded-lg bg-white"></div> <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]"> <div class="px-8 pt-8 sm:px-10 sm:pt-10"> <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Security</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.</p> </div> <div class="@container flex flex-1 items-center max-lg:py-6 lg:pb-2"> <img class="h-auto w-full max-h-[152px] object-contain @lg:object-cover" src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png" alt="Security illustration" /> </div> </div> <div class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5"></div> </div> <!-- Item 4 (Large Row, Col 3 - Example with Code) --> <div class="relative lg:row-span-2"> <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"></div> <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(var(--radius-2xl)+1px)] lg:rounded-r-[calc(var(--radius-2xl)+1px)]"> <div class="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0"> <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Powerful APIs</p> <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget sem sodales gravida.</p> </div> <div class="relative min-h-[30rem] w-full grow"> <div class="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900 shadow-2xl"> <div class="flex bg-gray-800/40 ring-1 ring-white/5"> <div class="-mb-px flex text-sm/6 font-medium text-gray-400"> <div class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">main.jsx</div> <div class="border-r border-gray-600/10 px-4 py-2">App.jsx</div> </div> </div> <div class="px-6 pt-6 pb-14"> <pre class="text-sm text-white overflow-x-auto"><code>// Your code example const api = new API(); api.connect();</code></pre> </div> </div> </div> </div> <div class="pointer-events-none absolute inset-px rounded-lg shadow-sm ring-1 ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"></div> </div> </div> </div> </div> ``` ## JavaScript Notes - The original Svelte component uses props (`mainTitle`, `subTitle`, `items`) to dynamically populate the content and structure of the grid. - The `items` array is iterated over, and conditional logic (`{#if item.imageUrl}`, `{#if item.codeContent}`) determines how each bento box is rendered. - For a static HTML version, this dynamic rendering would be replaced by hardcoding the content for each grid item or generating it server-side. ## CSS Notes - **CSS Variables for Radii:** The snippet uses `calc(var(--radius-lg)+1px)` and `calc(var(--radius-2xl)+1px)` for rounded corners. This requires CSS variables like `--radius-lg: 0.5rem;` and `--radius-2xl: 1rem;` to be defined globally or via a Tailwind plugin/configuration. - **Container Queries:** The styling for images within some items (e.g., `h-[min(152px,40cqw)]`, `@lg:object-cover`) suggests the use of CSS container queries (`@container`, `cqw` units). This requires a compatible browser and appropriate Tailwind configuration if not using native CSS container queries. - **Themeable Classes:** Comments in the original snippet indicate parts of the component are "Themeable" using CSS variables (e.g., `bg-theme-bg-base`). These are not directly translated into the static HTML example but are important for understanding the original component's design. This Markdown file provides an HTML structure and class details based on the `bento-three-column.svelte` snippet.