Tailwind Svelte Assistant

# Blog List with Featured Post - HTML & Tailwind CSS Example This document provides an HTML structure and Tailwind CSS class example derived from the `blog-list-featured-post.svelte` Svelte snippet. This example is intended for AI consumption and may need adaptation. The component displays a prominent featured blog post alongside a list of other posts. ## Overview This component creates a blog section layout where one post is highlighted as "featured," typically taking up more space or having more detailed information displayed, while other posts are listed more compactly. ## Original Svelte Component Props The original Svelte component defines the following props: - `title: string` (default: "From the blog") - Main title for the section. - `description: string` (default: "Learn how to grow your business with our expert advice.") - Section description. - `featuredPost: { id: string | number, title: string, href: string, description: string, date: string, datetime: string, category: { title: string, href: string }, author: { name: string, role: string, href: string, imageUrl: string } }` - An object for the featured post. - `posts: Array<{ id: string | number, title: string, href: string, description: string, date: string, datetime: string, category: { title: string, href: string }, author: { name: string, role: string, href: string, imageUrl: string } }>` - An array of objects for the list of other posts. ## Theme Variables Noted in Original Snippet - `--theme-bg-base` (e.g., `bg-white`) - `--theme-bg-alt` (e.g., `bg-gray-50`) - `--theme-text-base` (e.g., `text-gray-900`) - `--theme-text-muted` (e.g., `text-gray-600`, `text-gray-500`) - `--theme-primary-accent` (e.g., `text-indigo-600`) - `--theme-border-color` (e.g., `border-gray-900/10`) - `--theme-border-radius-full` (e.g., `rounded-full`) ## HTML Structure Example (Conceptual) This static HTML represents the structure generated by the Svelte component with its default props. ```html <div class="bg-white py-24 sm:py-32"> <!-- theme: bg-theme-bg-base --> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <!-- Section Header (Not explicitly in this snippet, but typical) --> <!-- <div class="mx-auto max-w-2xl text-center"> <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">From the blog</h2> <p class="mt-2 text-lg leading-8 text-gray-600">Learn how to grow your business with our expert advice.</p> </div> --> <div class="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8"> <!-- Featured Post Article --> <article class="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg"> <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 16, 2020</time> <!-- theme: text-theme-text-muted --> <h2 id="featured-post-title" class="mt-4 text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl">We’re incredibly proud to announce we have secured $75m in Series B</h2> <!-- theme: text-theme-text-base --> <p class="mt-4 text-lg/8 text-gray-600">Libero neque aenean tincidunt nec consequat tempor. Viverra odio id velit adipiscing id. Nisi vestibulum orci eget bibendum dictum. Velit viverra posuere vulputate volutpat nunc. Nunc netus sit faucibus.</p> <!-- theme: text-theme-text-muted --> <div class="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col"> <div class="flex"> <a href="#" class="text-sm/6 font-semibold text-indigo-600" aria-describedby="featured-post-title">Continue reading <span aria-hidden="true">&rarr;</span></a> <!-- theme: text-theme-primary-accent --> </div> <div class="flex lg:border-t lg:border-gray-900/10 lg:pt-8"> <!-- theme: border-theme-border-color --> <a href="#" class="flex gap-x-2.5 text-sm/6 font-semibold text-gray-900"> <!-- theme: text-theme-text-base --> <img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Michael Foster avatar" class="size-6 flex-none rounded-full bg-gray-50"> <!-- theme: bg-theme-bg-alt, rounded-theme-border-radius-full --> Michael Foster </a> </div> </div> </article> <!-- List of Other Posts --> <div class="mx-auto w-full max-w-2xl border-t border-gray-900/10 pt-12 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0"> <!-- theme: border-theme-border-color --> <div class="-my-12 divide-y divide-gray-900/10"> <!-- theme: divide-theme-border-color --> <!-- Example Other Post Article --> <article class="py-12"> <div class="group relative max-w-xl"> <time datetime="2020-03-10" class="block text-sm/6 text-gray-600">Mar 10, 2020</time> <h2 class="mt-2 text-lg font-semibold text-gray-900 group-hover:text-gray-600"> <a href="#"> <span class="absolute inset-0"></span> Boost your conversion rate </a> </h2> <p class="mt-4 text-sm/6 text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.</p> </div> <div class="mt-4 flex"> <a href="#" class="relative flex gap-x-2.5 text-sm/6 font-semibold text-gray-900"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Lindsay Walton avatar" class="size-6 flex-none rounded-full bg-gray-50"> Lindsay Walton </a> </div> </article> <!-- More articles would be generated here by the Svelte #each block --> </div> </div> </div> </div> </div> ``` ## JavaScript Notes - The Svelte component uses `featuredPost` (object) and `posts` (array of objects) props to dynamically populate the content. - An `{#each posts as post}` block is used to render the list of other posts. - For static HTML, content for the featured post and each list item would be hardcoded. ## CSS Notes - **Layout:** A CSS grid (`lg:grid-cols-2`) is used to position the featured post and the list of other posts side-by-side on larger screens. - **Hover Effects:** The titles of posts in the list have a `group-hover:text-gray-600` effect. - **Absolute Link Spans:** Similar to other card-like components, an `<span class="absolute inset-0"></span>` is used within links to make the entire card/article area clickable. This Markdown file provides an HTML structure and class details based on the `blog-list-featured-post.svelte` snippet.