Tailwind CSS Hero Sliders Blocks

All Blocks
Marketing
Hero Sliders

Hero Sliders

Carousel-led hero sliders and promotional landing intros for ecommerce storefronts, marketplaces, and campaign-driven marketing pages.

A wide hero slider pairs promo copy with large media panels and in-slide navigation controls.

Create a responsive UI block named "Marketplace Promo Hero Slider" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sliders/#marketplace-promo-hero-slider. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: marketing/hero-sliders
- Block ID: marketplace-promo-hero-slider
- Source description: A wide hero slider pairs promo copy with large media panels and in-slide navigation controls.
- Preview iframe: https://preline.co/blocks/marketing/hero-sliders/iframes/pro/marketplace-promo-hero-slider.html (repo path: blocks/marketing/hero-sliders/iframes/pro/marketplace-promo-hero-slider.html)
- Source markup reference:
  - partials/pro/marketplace/layouts-components/hero-slider.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Slide 1 copy: uppercase eyebrow `iPad cases` above the h2 `Including the new Pros and Airs.`, centered in `text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center`.
  - Slide 2 copy: h2 `New styles` with the paragraph `From lightweight leathers to the cases, new seasonal favorites are here.`, left-aligned in `size-full max-w-lg p-8 sm:p-16 flex flex-col`.
  - Slide 3 copy: three stacked uppercase lines `Up to`, `40% off`, `For everything` (the last one `md:text-end` and `text-yellow-400`), then the h2 `End of year sale` and `Celebrate with up to 40% off everything for a limited time.`
  - All three slides end with the identical pill `Shop now` (`py-2 px-3 font-semibold text-sm bg-plain text-inverse rounded-full`), and each entire slide is wrapped in a single `<a>`.
  - Slides 1 and 2 use a full-bleed Unsplash `<img class="absolute inset-0 size-full object-cover rounded-xl" alt="Hero Image">`; slide 3 has no hero photo and is instead a `bg-linear-to-br from-primary-500 to-primary-900` panel.
  - Slide 3's right half is exactly four product thumbnails in `h-120 lg:h-160 grid grid-cols-2 gap-3 sm:gap-5 -rotate-12`, with the second column offset by `-mt-6`, each framed `p-1.5 bg-layer rounded-2xl lg:rounded-3xl shadow-2xl`.
  - Height is `h-120 lg:h-160`, repeated on the `hs-carousel` container and on each slide link; the arrow buttons carry sr-only labels `Previous` and `Next`, and the `hs-carousel-pagination` div is empty in the source because HSCarousel injects the dots.
  - No autoplay option is set, slide 1 is active on load, and because `isInfiniteLoop: true` the arrows never actually reach their `hs-carousel-disabled` state; the outer `py-4 sm:py-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto` wrapper comes from the demo page, not the slider itself.

Carousel behavior rules:
- The source is a Preline HS Carousel block. Preserve actual carousel behavior, not just a static first slide or a hand-waved layout.
- Use the destination project's existing carousel/slider primitive first when it can match the source structure, transitions, disabled states, keyboard/focus behavior, controls, and pagination.
- If the destination project has no carousel primitive/package and does not explicitly forbid new dependencies, use/install the Preline UI Carousel runtime/plugin rather than building an ad hoc React state carousel. Import the Preline runtime according to the destination framework's conventions and initialize the carousel once the DOM is ready.
- Preserve the source HS Carousel relationships: the `data-hs-carousel` options, `.hs-carousel` viewport, `.hs-carousel-body` flex track, `.hs-carousel-slide` items, `.hs-carousel-prev` and `.hs-carousel-next` controls, `.hs-carousel-pagination`, disabled-state classes, `transition-transform duration-700`, `loadingClasses: "opacity-0"`, `isInfiniteLoop: true`, and `dotsItemClasses`.
- Keep the three source slides, image URLs, promo copy, CTA text, heights, rounded frame, side arrow controls, dot pagination, and screen-reader labels exactly. Do not simplify the carousel to one image, convert it to tabs, or replace it with an unrelated slider library unless the project already standardizes on that library.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="py-4 sm:py-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "isInfiniteLoop": true,
                          "dotsItemClasses": "hs-carousel-active:bg-plain bg-plain/50 size-3 rounded-full cursor-pointer"
                        }' class="relative">
                        <div class="hs-carousel relative overflow-hidden h-120 lg:h-160 w-full bg-surface rounded-xl">
                          <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                            
                            <div class="hs-carousel-slide">
                              
                              <a class="h-120 lg:h-160 relative block rounded-xl focus:outline-hidden" href="#">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1713492664635-1363f44734ef?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center">
                                  <p class="text-sm md:text-base uppercase text-foreground-inverse">
                                    iPad cases
                                  </p>

<h2 class="mt-2 font-semibold text-3xl sm:text-4xl lg:text-5xl text-foreground-inverse">
                                    Including the new Pros and Airs.
                                  </h2>

<div class="hs-carousel-slide">
                              
                              <a class="h-120 lg:h-160 relative block rounded-xl focus:outline-hidden" href="#">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1644462982538-ee5ce6abd2db?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 size-full max-w-lg p-8 sm:p-16 flex flex-col">
                                  <h2 class="font-semibold text-3xl sm:text-4xl lg:text-5xl text-inverse">
                                    New styles
                                  </h2>

<p class="mt-3 text-sm md:text-base text-inverse">
                                    From lightweight leathers to the cases, new seasonal favorites are here.
                                  </p>

<div class="hs-carousel-slide">
                              
                              <a class="h-120 lg:h-160 relative block overflow-hidden bg-linear-to-br from-primary-500 to-primary-900 rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/listing-grid.html">
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 items-center gap-5">
                                  
                                  <div class="p-12 sm:p-16 md:ps-20 md:pe-0 max-w-xl">
                                    <span class="block font-bold uppercase text-2xl sm:text-3xl lg:text-4xl text-foreground-inverse">
                                      Up to
                                    </span>
                                    <span class="block font-bold uppercase text-5xl sm:text-6xl lg:text-7xl xl:text-8xl text-foreground-inverse">
                                      40% off
                                    </span>
                                    <span class="block md:text-end font-bold uppercase text-xl sm:text-2xl lg:text-3xl text-yellow-400">
                                      For everything
                                    </span>

<p class="mt-1 text-foreground-inverse">
                                        Celebrate with up to 40% off everything for a limited time.
                                      </p>

<div class="h-120 lg:h-160 grid grid-cols-2 gap-3 sm:gap-5 -rotate-12">
                                    <div class="flex flex-col gap-3 sm:gap-5">
                                      <div class="p-1.5 bg-layer rounded-2xl lg:rounded-3xl shadow-2xl">
                                        <img class="size-full object-cover rounded-xl lg:rounded-2xl" src="https://images.unsplash.com/photo-1548874468-025d0edfdf8b?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                      <div class="p-1.5 bg-layer rounded-2xl lg:rounded-3xl shadow-2xl">
                                        <img class="size-full object-cover rounded-xl lg:rounded-2xl" src="https://images.unsplash.com/photo-1513652990199-8a52e2313122?q=80&w=320&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-1 sm:inset-s-4 inline-flex justify-center items-center size-10 bg-plain text-inverse rounded-full shadow-2xs hover:text-primary-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                          </span>
                          <span class="sr-only">Previous</span>
                        </button>
                        <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-e-1 sm:inset-e-4 inline-flex justify-center items-center size-10 bg-plain text-inverse rounded-full shadow-2xs hover:text-primary-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="sr-only">Next</span>
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                          </span>
                        </button>

Open Marketplace homepage

Large slide panels carry the hero media, with copy and actions layered into the same frame.

Create a responsive UI block named "Storefront Promo Hero Slider" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sliders/#storefront-promo-hero-slider. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sliders
- Block ID: storefront-promo-hero-slider
- Source description: Large slide panels carry the hero media, with copy and actions layered into the same frame.
- Preview iframe: https://preline.co/blocks/marketing/hero-sliders/iframes/pro/storefront-promo-hero-slider.html (repo path: blocks/marketing/hero-sliders/iframes/pro/storefront-promo-hero-slider.html)
- Source markup reference:
  - partials/pro/storefront/layouts-components/hero-slider.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Outer wrapper is `pt-4 sm:pt-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto`; the viewport is `hs-carousel relative overflow-hidden w-full h-120 md:h-160 bg-surface rounded-xl`.
  - Exactly three slides. Slide 1: heading `Fall favorites`, paragraph `Our always-in-season staple, in brand new colors and your favorite fits.`, one link `Shop women's clothing`. Slide 2: heading `New styles`, paragraph `From lightweight layers to the perfect pair of pants, new seasonal favorites are here.`, two links `Shop men` and `Shop women`. Slide 3: uppercase eyebrow `Summer sale` above heading `Up to 50% off`, two links `Shop men` and `Shop women`.
  - Slide media is an `<img alt="Hero Image">` with `absolute inset-0 size-full object-cover rounded-xl` (three distinct Unsplash URLs); content is centered with `relative z-10 text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center`.
  - Headings are `h2` at `font-semibold text-3xl sm:text-4xl lg:text-5xl text-foreground-inverse`; all CTAs are underlined text links (`underline underline-offset-4`), never filled buttons, grouped in a `flex flex-wrap justify-center gap-5 lg:gap-10` row.
  - Arrows are `size-10` circular buttons (`bg-layer border border-layer-line rounded-full shadow-2xs`) vertically centered at `inset-s-1 sm:inset-s-4` / `inset-e-1 sm:inset-e-4`, with 24 viewBox chevrons and `sr-only` labels `Previous` and `Next`.
  - The bottom counter is a pill (`py-1 px-2 ... bg-layer rounded-full`) showing `1 / 3` on load, with current and total in `min-w-2` spans; there are no dot indicators and no thumbnail strip.

Carousel behavior rules:
- The source is a Preline HS Carousel block. Preserve actual carousel behavior, not just a static first slide or a hand-waved layout.
- Use the destination project's existing carousel/slider primitive first when it can match the source structure, transitions, disabled states, keyboard/focus behavior, controls, and slide counter.
- If the destination project has no carousel primitive/package and does not explicitly forbid new dependencies, use/install the Preline UI Carousel runtime/plugin rather than building an ad hoc React state carousel. Import the Preline runtime according to the destination framework's conventions and initialize the carousel once the DOM is ready.
- Preserve the source HS Carousel relationships: the `data-hs-carousel` options, `.hs-carousel` viewport, `.hs-carousel-body` flex track, `.hs-carousel-slide` items, `.hs-carousel-prev` and `.hs-carousel-next` controls, `.hs-carousel-info`, `.hs-carousel-info-current`, `.hs-carousel-info-total`, disabled-state classes, `transition-transform duration-700`, `loadingClasses: "opacity-0"`, and `isInfiniteLoop: true`.
- Keep the three source slides, image URLs, copy, links, heights, rounded frame, side arrow controls, bottom slide counter, and screen-reader labels exactly. Do not simplify the carousel to one image, convert it to tabs, or replace it with an unrelated slider library unless the project already standardizes on that library.

<div class="pt-4 sm:pt-6 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "isInfiniteLoop": true
                        }' class="relative">
                        <div class="hs-carousel relative overflow-hidden w-full h-120 md:h-160 bg-surface rounded-xl">
                          <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                            
                            <div class="hs-carousel-slide">
                              
                              <div class="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1713276753136-c386da1ec670?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<div class="relative z-10 text-center size-full max-w-lg mx-auto px-12 flex flex-col justify-center items-center">
                                  <h2 class="font-semibold text-3xl sm:text-4xl lg:text-5xl text-foreground-inverse">
                                    Fall favorites
                                  </h2>

<p class="mt-3 text-sm md:text-base text-foreground-inverse">
                                    Our always-in-season staple, in brand new colors and your favorite fits.
                                  </p>

<div class="mt-5 md:mt-10">
                                    <div class="flex flex-wrap justify-center gap-5 lg:gap-10">
                                      <a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid-with-mini-categories.html">
                                        Shop women's clothing
                                      </a>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1603139635700-04637d0d16bd?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<p class="mt-3 text-sm md:text-base text-foreground-inverse">
                                    From lightweight layers to the perfect pair of pants, new seasonal favorites are here.
                                  </p>

<a class="text-sm md:text-base text-foreground-inverse underline underline-offset-4 hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../templates/ecommerce/storefront/listing-grid-with-categories.html">
                                        Shop women
                                      </a>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-120 md:h-160 relative">
                                <img class="absolute inset-0 size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1684144064253-bb3b4c8fc700?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hero Image">

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-1 sm:inset-s-4 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                          </span>
                          <span class="sr-only">Previous</span>
                        </button>
                        <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-e-1 sm:inset-e-4 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="sr-only">Next</span>
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                          </span>
                        </button>

<div class="p-2 absolute bottom-0 inset-x-0 text-center">
                          <div class="py-1 px-2 inline-flex justify-center items-center gap-2 bg-layer rounded-full">
                            <span class="hs-carousel-info text-xs text-foreground">
                              <span class="hs-carousel-info-current inline-block min-w-2 text-center">1</span> / <span class="hs-carousel-info-total inline-block min-w-2 text-center">3</span>
                            </span>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open Storefront homepage

Rounded Image Hero Carousel Free

Rounded media cards rotate inside a tall hero layout with supporting copy and slider controls.

Create a responsive UI block named "Rounded Image Hero Carousel" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/hero-sliders/#rounded-image-hero-carousel. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/hero-sliders
- Block ID: rounded-image-hero-carousel
- Source description: Rounded media cards rotate inside a tall hero layout with supporting copy and slider controls.
- Preview iframe: https://preline.co/blocks/marketing/hero-sliders/iframes/free/rounded-image-hero-carousel.html (repo path: blocks/marketing/hero-sliders/iframes/free/rounded-image-hero-carousel.html)
- Source markup reference:
  - partials/blocks/sources/pages/hero-rounded-image-carousel.html

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Outer wrapper is `px-4 sm:px-6 lg:px-8 py-10`; the carousel viewport is `hs-carousel relative overflow-hidden w-full h-120 md:h-[calc(100vh-106px)] bg-surface rounded-2xl`.
  - Exactly three slides, in order: eyebrow `Nike React` with headline `Rewriting sport's playbook for billions of athletes`; `CoolApps` with `From mobile apps to gaming consoles`; `Grumpy` with `Bringing Art to everything`.
  - Every slide has the same single CTA link labeled `Read Case Studies`, styled `py-2 px-3 ... rounded-xl bg-plain text-inverse`, and the copy block is `mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10` (bottom-start aligned over the photo).
  - Slide backgrounds are three Unsplash photos applied as `bg-[url(...)] bg-cover bg-center bg-no-repeat` on a full-height div, not `<img>` elements; keep the exact photo URLs.
  - The eyebrow is a plain `text-foreground-inverse` span and the headline is `text-xl md:text-3xl` - both are `<span class="block">`, not heading tags.
  - Only two controls exist: full-height `w-12` prev/next arrow buttons pinned inset-start/inset-end with `rounded-s-2xl`/`rounded-e-2xl`, 16x16 filled chevron SVGs, and `sr-only` labels `Previous` and `Next`. There are no dots/pagination, no autoplay option, and no slide counter.

Carousel behavior rules:
- The source is a Preline HS Carousel block. Preserve actual carousel behavior, not just a static first slide or a hand-waved layout.
- Use the destination project's existing carousel/slider primitive first when it can match the source structure, transitions, disabled states, keyboard/focus behavior, and controls.
- If the destination project has no carousel primitive/package and does not explicitly forbid new dependencies, use/install the Preline UI Carousel runtime/plugin rather than building an ad hoc React state carousel. Import the Preline runtime according to the destination framework's conventions and initialize the carousel once the DOM is ready.
- Preserve the source HS Carousel relationships: the `data-hs-carousel` options, `.hs-carousel` viewport, `.hs-carousel-body` flex track, `.hs-carousel-slide` items, `.hs-carousel-prev` and `.hs-carousel-next` controls, disabled-state classes, `transition-transform duration-700`, and `loadingClasses: "opacity-0"`.
- Keep the three source slides, background image URLs, copy, CTA text, heights, rounded media frame, side arrow controls, and screen-reader labels exactly. Do not simplify the carousel to one image, convert it to tabs, or replace it with an unrelated slider library unless the project already standardizes on that library.

<div class="px-4 sm:px-6 lg:px-8 py-10">
                  <div data-hs-carousel='{
                      "loadingClasses": "opacity-0"
                    }' class="relative">
                    <div class="hs-carousel relative overflow-hidden w-full h-120 md:h-[calc(100vh-106px)]  bg-surface rounded-2xl">
                      <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                        
                        <div class="hs-carousel-slide">
                          <div class="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1615615228002-890bb61cac6e?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">Nike React</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">Rewriting sport's playbook for billions of athletes</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
        
                        
                        <div class="hs-carousel-slide">
                          <div class="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">CoolApps</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">From mobile apps to gaming consoles</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
        
                        
                        <div class="hs-carousel-slide">
                          <div class="h-120 md:h-[calc(100vh-106px)]  flex flex-col bg-[url('https://images.unsplash.com/photo-1629666451094-8908989cae90?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
                            <div class="mt-auto w-2/3 md:max-w-lg ps-5 pb-5 md:ps-10 md:pb-10">
                              <span class="block text-foreground-inverse">Grumpy</span>
                              <span class="block text-foreground-inverse text-xl md:text-3xl">Bringing Art to everything</span>
                              <div class="mt-5">
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-xl bg-plain text-inverse hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Read Case Studies
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 inset-s-0 inline-flex justify-center items-center w-12 h-full text-inverse hover:bg-plain/20 rounded-s-2xl focus:outline-hidden focus:bg-plain/20">
                      <span class="text-2xl" aria-hidden="true">
                        <svg class="shrink-0 size-3.5 md:size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
                        </svg>
                      </span>
                      <span class="sr-only">Previous</span>
                    </button>
    
                    <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 disabled:pointer-events-none absolute inset-y-0 inset-e-0 inline-flex justify-center items-center w-12 h-full text-inverse hover:bg-plain/20 rounded-e-2xl focus:outline-hidden focus:bg-plain/20">
                      <span class="sr-only">Next</span>
                      <span class="text-2xl" aria-hidden="true">
                        <svg class="shrink-0 size-3.5 md:size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                      </span>
                    </button>
                    
                  </div>
                </div>

Hero Sliders

Marketplace Promo Hero Slider Pro

Storefront Promo Hero Slider Pro

Rounded Image Hero Carousel Free