Product Grid Skeleton

Responsive product grid skeleton built with Tailwind CSS for e-commerce storefronts and online marketplaces. Features animated image placeholders, product titles, pricing, filter chips, and button placeholders.

This tailwind example is contributed by JUGENDRA GANGWAR, on 13-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader Other

Author JUGENDRA GANGWAR

Tailwind v3.4 4

Fork Fullscreen

<div class="min-h-screen bg-slate-50 px-4 py-10 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-7xl">

<div class="mb-8 flex flex-wrap items-end justify-between gap-4">
      <div>
        <div class="mb-3 h-3 w-24 animate-pulse rounded bg-indigo-100"></div>
        <div class="h-8 w-56 max-w-full animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-4 w-72 max-w-full animate-pulse rounded bg-slate-200"></div>
      </div>

<div class="h-10 w-32 animate-pulse rounded-xl bg-slate-200"></div>
    </div>

<div class="mb-7 flex flex-wrap gap-3">
      <div class="h-9 w-20 animate-pulse rounded-full bg-slate-200"></div>
      <div class="h-9 w-24 animate-pulse rounded-full bg-white ring-1 ring-slate-200"></div>
      <div class="h-9 w-20 animate-pulse rounded-full bg-white ring-1 ring-slate-200"></div>
      <div class="h-9 w-28 animate-pulse rounded-full bg-white ring-1 ring-slate-200"></div>
    </div>

<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="relative aspect-[4/5] animate-pulse overflow-hidden rounded-xl bg-slate-100">
          <div class="absolute left-3 top-3 h-6 w-14 rounded-full bg-white/80"></div>
          <div class="absolute bottom-3 right-3 h-9 w-9 rounded-full bg-white/80"></div>
        </div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-20 animate-pulse rounded bg-indigo-100"></div>
          <div class="mt-3 h-4 w-3/4 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 flex items-center justify-between">
            <div class="h-5 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-4 w-12 animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="relative aspect-[4/5] animate-pulse overflow-hidden rounded-xl bg-slate-100">
          <div class="absolute left-3 top-3 h-6 w-16 rounded-full bg-white/80"></div>
          <div class="absolute bottom-3 right-3 h-9 w-9 rounded-full bg-white/80"></div>
        </div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-16 animate-pulse rounded bg-violet-100"></div>
          <div class="mt-3 h-4 w-4/5 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-2/5 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 flex items-center justify-between">
            <div class="h-5 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-4 w-10 animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="relative aspect-[4/5] animate-pulse overflow-hidden rounded-xl bg-slate-100">
          <div class="absolute left-3 top-3 h-6 w-12 rounded-full bg-white/80"></div>
          <div class="absolute bottom-3 right-3 h-9 w-9 rounded-full bg-white/80"></div>
        </div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-24 animate-pulse rounded bg-emerald-100"></div>
          <div class="mt-3 h-4 w-2/3 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-3/5 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 flex items-center justify-between">
            <div class="h-5 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-4 w-14 animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="relative aspect-[4/5] animate-pulse overflow-hidden rounded-xl bg-slate-100">
          <div class="absolute left-3 top-3 h-6 w-16 rounded-full bg-white/80"></div>
          <div class="absolute bottom-3 right-3 h-9 w-9 rounded-full bg-white/80"></div>
        </div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-20 animate-pulse rounded bg-amber-100"></div>
          <div class="mt-3 h-4 w-3/4 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 flex items-center justify-between">
            <div class="h-5 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-4 w-12 animate-pulse rounded bg-slate-100"></div>
          </div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="aspect-[4/5] animate-pulse rounded-xl bg-slate-100"></div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-16 animate-pulse rounded bg-violet-100"></div>
          <div class="mt-3 h-4 w-4/5 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 h-5 w-20 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="aspect-[4/5] animate-pulse rounded-xl bg-slate-100"></div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-24 animate-pulse rounded bg-blue-100"></div>
          <div class="mt-3 h-4 w-2/3 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-3/5 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 h-5 w-24 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="aspect-[4/5] animate-pulse rounded-xl bg-slate-100"></div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-20 animate-pulse rounded bg-rose-100"></div>
          <div class="mt-3 h-4 w-3/4 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-2/5 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 h-5 w-20 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="aspect-[4/5] animate-pulse rounded-xl bg-slate-100"></div>
        <div class="px-1 pb-2 pt-4">
          <div class="h-3 w-16 animate-pulse rounded bg-emerald-100"></div>
          <div class="mt-3 h-4 w-4/5 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-1/2 animate-pulse rounded bg-slate-100"></div>
          <div class="mt-4 h-5 w-24 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-4 h-10 w-full animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Banner Page
Community Banner section code

Sayista Yazdani

2 months ago

152
Profile card skeleton loading

Kris Showen

3 years ago

12.9k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22k
pages / slides

MD Fardous Alom

1 year ago

2.3k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Muhammad Umair Arshad

1 year ago

1.6k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
component1
this is for demo

Anonymous

2 weeks ago

146
Image Gallery with Alpine.Js

Maxim

1 year ago

1.7k
machine
tell you how your MAC pc work

gidy

10 months ago

750
Forgot password?
you can change password an time

gidy

1 year ago

1k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Ahita Bisma Adlula

1 year ago

1.2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.