Table Skeleton

Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

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 3

Fork Fullscreen

<div class="min-h-screen bg-slate-50 p-4 sm:p-6 lg:p-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-20 animate-pulse rounded bg-indigo-100"></div>
        <div class="h-8 w-48 max-w-full animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-4 w-64 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-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-20 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-28 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-24 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-24 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-16 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-32 animate-pulse rounded bg-slate-100"></div>
      </div>
      <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
        <div class="mt-4 h-8 w-24 animate-pulse rounded-lg bg-slate-200"></div>
        <div class="mt-3 h-3 w-28 animate-pulse rounded bg-slate-100"></div>
      </div>
    </div>
  
    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">

<div class="flex flex-col gap-4 border-b border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <div class="h-5 w-36 animate-pulse rounded bg-slate-200"></div>
          <div class="mt-2 h-3 w-44 animate-pulse rounded bg-slate-100"></div>
        </div>
        <div class="flex flex-wrap gap-3">
          <div class="h-10 w-44 max-w-full animate-pulse rounded-xl bg-slate-100"></div>
          <div class="h-10 w-24 animate-pulse rounded-xl bg-slate-200"></div>
        </div>
      </div>

<div class="overflow-x-auto">
        <div class="min-w-[720px]">
  
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 bg-slate-50/70 px-6 py-4">
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-3 w-3 animate-pulse rounded bg-slate-200"></div>
          </div>
    
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-indigo-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-36 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
   
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-violet-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-32 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-28 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-24 animate-pulse rounded-full bg-amber-100"></div>
            <div class="h-3 w-16 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-rose-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-32 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-28 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
 
          <div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 border-b border-slate-100 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-amber-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-28 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-36 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-24 animate-pulse rounded-full bg-rose-100"></div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>

<div class="grid grid-cols-[2fr_1.2fr_1fr_1fr_44px] items-center gap-4 px-6 py-5">
            <div class="flex min-w-0 items-center gap-3">
              <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-sky-100"></div>
              <div class="min-w-0 flex-1">
                <div class="h-3 w-32 animate-pulse rounded bg-slate-200"></div>
                <div class="mt-2 h-3 w-28 max-w-full animate-pulse rounded bg-slate-100"></div>
              </div>
            </div>
            <div class="h-3 w-20 animate-pulse rounded bg-slate-100"></div>
            <div class="h-6 w-20 animate-pulse rounded-full bg-emerald-100"></div>
            <div class="h-3 w-24 animate-pulse rounded bg-slate-200"></div>
            <div class="h-7 w-7 animate-pulse rounded-lg bg-slate-100"></div>
          </div>
        </div>
      </div>
  
      <div class="flex flex-col gap-4 border-t border-slate-100 p-5 sm:flex-row sm:items-center sm:justify-between">
        <div class="h-3 w-40 animate-pulse rounded bg-slate-100"></div>
        <div class="flex items-center gap-2">
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-indigo-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
          <div class="h-9 w-9 animate-pulse rounded-lg bg-slate-100"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Cockatoo

Lokesh H

2 months ago

77
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.

JUGENDRA GANGWAR

16 hours ago

4
Chat Interface Skeleton
Messaging interface skeleton built with Tailwind CSS.

JUGENDRA GANGWAR

16 hours ago

4
User Profile Skeleton
Profile page skeleton built with Tailwind CSS. Includes a cover banner, avatar, profile details, stats, navigation tabs, about section, and activity feed placeholders.

JUGENDRA GANGWAR

15 hours ago

3
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

980
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Homepage event

Anonymous

1 year ago

1.2k
Upvote downvote buttons

Lucas Martinez

3 years ago

12.5k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5.1k
Free Tailwind components,
Free Tailwind components,

Omer fils ELENGA

1 week ago

30
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
tab3
table

Anonymous

2 weeks ago

84

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.