Tailwind CSS Product Carousels Blocks

All Blocks
Ecommerce
Product Carousels

Product Carousels

Product carousels for marketplace sliders, recommendation rails, and horizontally scrollable ecommerce product discovery sections.

Marketplace Product Card Carousel Pro

Draggable marketplace carousel pairs a section header and arrow controls with product cards that show price pairs in a horizontal rail.

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "slidesQty": {
                          "xs": 2,
                          "md": 3,
                          "lg": 4,
                          "xl": 5
                        },
                        "isDraggable": true
                      }' class="relative">
                      
                      <div class="mb-2 flex flex-wrap justify-between items-center gap-3">
                        <h2 class="font-medium text-lg text-foreground">
                          New arrivals
                        </h2>

<div class="flex items-center gap-x-2">
                          <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default inline-flex justify-center items-center size-8 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                            <span class="text-2xl" aria-hidden="true">
                              <svg class="shrink-0 size-4" 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 inline-flex justify-center items-center size-8 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                            <span class="sr-only">Next</span>
                            <span class="text-2xl" aria-hidden="true">
                              <svg class="shrink-0 size-4" 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>
                        
                      </div>

<div class="hs-carousel w-full overflow-hidden">
                        <div class="hs-carousel w-full">
                          <div class="hs-carousel-body flex flex-nowrap gap-3 md:gap-5 opacity-0 transition-transform duration-700 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing">
                            <div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1680268101608-a2edbc3291f8?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      iPhone 14 Case
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $59 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$79</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Charger for Apple Devices
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $45 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Apple Pencil
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $89 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$109</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Sony WH1000XM5 Headphones
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $199 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1652540492984-c347f10fcbaf?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
      
                                    
                                    <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                      <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                        <div class="h-full flex flex-col justify-center items-center">
                                          <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shmchpdm">
                                            <svg class="shrink-0 size-4" 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                            Quick view
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Pixel Tablet
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $279 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$399</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1554116154-e733de92fe4b?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
      
                                    
                                    <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                      <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                        <div class="h-full flex flex-col justify-center items-center">
                                          <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shmchpdm">
                                            <svg class="shrink-0 size-4" 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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                            Quick view
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Apple Watch SE
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $249 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                      </div>
                      
                    </div>

Product Recommendation Card Carousel Pro

Snap-based recommendation rail combines a section heading, product cards with star ratings, and overlayed previous and next controls.

<div class="py-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      
                      <div class="mb-3">
                        <h2 class="font-medium text-xl text-foreground">
                          You may also like
                        </h2>
                      </div>

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "slidesQty": {
                          "xs": 2,
                          "md": 3,
                          "xl": 4
                        },
                        "hasSnapSpacers": false,
                        "isSnap": true
                      }' class="relative">
                        <div class="overflow-x-hidden">
                          <div class="-mx-1 sm:-mx-2.5">
                            <div class="hs-carousel w-full flex snap-x pb-4 sm:pb-10 snap-mandatory overflow-x-auto [&::-webkit-scrollbar-track]:mx-1 md:[&::-webkit-scrollbar-track]:mx-2.5 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <div class="hs-carousel-body flex flex-nowrap opacity-0 transition-transform duration-700">
                                <div class="hs-carousel-slide snap-center px-1 sm:px-2.5">
                                  
                                  <div  class=" group relative">
                                    <div class="relative">
                                      <a class="block rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/product-detail.html">
                                        <img class="rounded-xl" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=480&h=480&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </a>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <svg class="shrink-0 size-3.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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                                          <span class="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike SB Zoom Blazer Mid Electric
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $150
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (2)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Embroidered Hoodie
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Sweaters
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $69
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (234)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Mahabis Max Solo
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $39
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (6)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Dunk Low SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $40
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Jordan 1 Mid SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 text-sm">
                                        <span class="text-sm text-muted-foreground-1">
                                          <s>$80</s>
                                        </span>
                                        <span class="text-sm text-destructive">
                                          $65
                                        </span>
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Jordan 1 Mid SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 text-sm">
                                        <span class="text-sm text-muted-foreground-1">
                                          <s>$160</s>
                                        </span>
                                        <span class="text-sm text-destructive">
                                          $140
                                        </span>
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>
                          </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-2 z-10 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-2 z-10 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>
                      
                    </div>