Tailwind CSS Promo Cards Blocks

All Blocks
Marketing
Promo Cards

Promo Cards

Floating promotional cards, social follow prompts, and announcement cards for product updates, review requests, and lightweight marketing callouts.

Floating Rating Prompt Card Pro

A small floating card holds the prompt, rating control, and dismiss action in one fixed block.

<div id="hs-pro-shrpccid" class="fixed bottom-0 inset-s-0 sm:inset-s-auto inset-e-0 p-4 lg:p-10 lg:ps-0 w-full sm:max-w-sm">
                      <div class="p-1 flex flex-col bg-card border border-card-line rounded-2xl shadow-lg">
                        
                        <div class="py-3 px-7 relative text-center">
                          <p class="font-medium text-layer-foreground">
                            Rate your purchases
                          </p>

<div class="absolute top-3 inset-e-3">
                            <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-remove-element="#hs-pro-shrpccid">
                              <span class="sr-only">Close</span>
                              <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>
                          
                        </div>

<div class="px-2">
                          
                          <div data-hs-carousel='{
                            "loadingClasses": "opacity-0",
                            "isCentered": true,
                            "slidesQty": {
                              "xs": 1
                            },
                            "isSnap": true,
                            "hasSnapSpacers": false
                          }' class="relative">
                            <div class="overflow-x-hidden">
                              <div class="hs-carousel w-full flex snap-x pb-2 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-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              Windrunner
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: White, Size: M
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="hs-carousel-slide snap-center px-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              White Jeans
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: Gray, Size: M
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1603344797033-f0f4f587ab60?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>
        
                                  <div class="hs-carousel-slide snap-center px-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              Embroidered Hoodie
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: White, Size: US 10
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                              </div>
                            </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-0 hs-carousel-disabled:cursor-default absolute top-1/2 -inset-s-2 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-0 hs-carousel-disabled:cursor-default absolute top-1/2 -inset-e-2 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>

<div class="p-4">
                          <button type="button" class="py-2.5 px-4 w-full inline-flex justify-center items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-remove-element="#hs-pro-shrpccid">
                            I'll leave a review later
                          </button>
                        </div>
                        
                      </div>
                    </div>

Open related storefront homepage

Compact Update Card with Thumbnail Pro

A compact media card stacks the thumbnail, headline, and short metadata in one small block.

<a class="group flex flex-col bg-card border border-card-line rounded-xl hover:border-line-3 focus:outline-hidden focus:border-line-3 transition duration-300" href="#">
                      <div class="p-2 w-full h-32 rounded-md">
                        <img class="size-full object-cover rounded-md dark:hidden" src="../../../assets/img/demo-previews/img32.webp" alt="Card Image">
                        <img class="size-full object-cover rounded-md dark:block hidden" src="../../../assets/img/demo-previews-dark/img32.webp" alt="Card Image">
                      </div>
  
                      <div class="p-3">
                        <div class="flex items-center gap-2">
                          <div class="grow">
                            <p class="text-wrap text-xs text-muted-foreground-1">
                              New
                            </p>
                            <p class="text-wrap font-medium text-sm text-foreground group-hover:text-primary group-focus:text-primary">
                              Preline Startup Demo
                            </p>
                          </div>
  
                          <svg class="shrink-0 size-3.5 text-primary opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition duration-300" 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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                        </div>
                      </div>
                    </a>

Open related analytics dashboard

Short follow cards repeat the platform icon, label, and prompt in a two-card row.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-5 lg:gap-10">
                      
                      <a class="p-3 sm:p-4 bg-layer border border-layer-line rounded-xl hover:bg-muted-hover hover:shadow-xs focus:outline-hidden focus:bg-muted-focus focus:shadow-xs" href="#">
                        <div class="flex items-center gap-x-4">
                          <span class="shrink-0 flex justify-center items-center size-10 bg-secondary text-secondary-foreground rounded-full">
                            <svg class="shrink-0 size-5" width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor"/></svg>
                          </span>
                          <div>
                            <h3 class="font-semibold text-foreground">
                              X (Twitter)
                            </h3>
                            <p class="text-sm text-muted-foreground-1">
                              Follow us here - we post cool stuff
                            </p>
                          </div>
                        </div>
                      </a>

<a class="p-3 sm:p-4 bg-layer border border-layer-line rounded-xl hover:bg-muted-hover hover:shadow-xs focus:outline-hidden focus:bg-muted-focus focus:shadow-xs" href="#">
                        <div class="flex items-center gap-x-4">
                          <span class="shrink-0 flex justify-center items-center size-10 bg-secondary text-secondary-foreground rounded-full">
                            <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"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
                          </span>
                          <div>
                            <h3 class="font-semibold text-foreground">
                              Instagram
                            </h3>
                            <p class="text-sm text-muted-foreground-1">
                              Follow us here - we share our story
                            </p>
                          </div>
                        </div>
                      </a>
                      
                    </div>

Open related startup about page

Promo Cards

Floating Rating Prompt Card Pro

Compact Update Card with Thumbnail Pro

Social Follow Card Pair Pro